uniapp：上拉加载更多、下拉刷新、页面滚动到指定位置

提醒
本文实例是使用uniapp进行开发演示的。

一、需求场景

在开发商品（SKU）列表页面时，通常有三个需求：

1. 页面下拉刷新，第一页展示最新数据；
2. 上拉加载更多数据；
3. 列表页面可以滚动到指定位置，例如：回到顶部、回到上次浏览位置

二、需求分析

1. 接口支持分页加载
2. 页面下拉刷新
   首先在pages.json页面路由里将enablePullDownRefresh参数值设为true，表示此页面开启下拉刷新；刷新成功后，页面数据更新并回到顶部；
3. 页面向上滑动时，检测是否有更多数据，加载到新的数据直接显示在当前页面列表数据下方，否则提示用户没有更多数据了；
4. 记录当前页面滚动的位置；当触发滚动到指定位置方法时将记录页面上次滚动的位置数值参入即可。

三、技术方案

1. uni-app页面生命周期onPullDownRefresh函数，监听用户下拉动作，一般用于下拉刷新；
2. uni-app页面生命周期onReachBottom函数，页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
3. uni-app页面生命周期onPageScroll函数，监听页面滚动，参数为Object；通过obj.scrollTop获取滚动距离；
4. uni.pageScrollTo()方法实现页面滚动到指定位置

四、技术知识点简介

4.1 下拉刷新（onPullDownRefresh）

小程序开启下拉刷新，在配置页面（pages.json）的 enablePullDownRefresh 属性为 true。
js代码示例

{
    "pages": [
       {
					"path": "pages/list/testPulldownRefreshReachBottom",
					"style": {
						"navigationBarTitleText": "产品列表",
						"enablePullDownRefresh": true,
						"app-plus": {
							"bounce": "vertical"
						}
					}
				}
   ]
}

在 App 平台下可以自定义部分下拉刷新的配置 page->style->app-plus->pullToRefresh。
js代码示例

{
    "pages": [
        {
            "path": "pages/index/index", //首页
            "style": {
                "app-plus": {
                    "pullToRefresh": {
                        "support": true,
                        "color": "#ff3333",
                        "style": "default",
                        "contentdown": {
                            "caption": "下拉可刷新自定义文本"
                        },
                        "contentover": {
                            "caption": "释放可刷新自定义文本"
                        },
                        "contentrefresh": {
                            "caption": "正在刷新自定义文本"
                        }
                    }
                }
            }
        }
    ]
}

下拉刷新使用注意

• enablePullDownRefresh 与 pullToRefresh->support 同时设置时，后者优先级较高。
• 如果期望在 App 和小程序上均开启下拉刷新的话，请配置页面的 enablePullDownRefresh 属性为 true。
• 若仅期望在 App 上开启下拉刷新，则不要配置页面的 enablePullDownRefresh 属性，而是配置 pullToRefresh->support 为 true。
• 开启原生下拉刷新时，页面里不应该使用全屏高的scroll-view，向下拖动内容时，会优先触发下拉刷新而不是scroll-view滚动
• 原生下拉刷新的起始位置在原生导航栏的下方，如果取消原生导航栏，使用自定义导航栏，原生下拉刷新的位置会在屏幕顶部。如果希望在自定义导航栏下方拉动，只能使用circle方式的下拉刷新，并设置offset参数，将circle圈的起始位置调整到自定义导航栏下方。hello uni-app的扩展组件中有示例。
• 如果想在app端实现更多复杂的下拉刷新，比如美团、京东App那种拉下一个特殊图形，可以使用nvue的组件。HBuilderX 2.0.3+起，新建项目选择新闻模板可以体验
• 如果想在vue页面通过web前端技术实现下拉刷新，插件市场有例子，但前端下拉刷新的性能不如原生，复杂长列表会很卡
• iOS上，default模式的下拉刷新和bounce回弹是绑定的，如果设置了bounce:none，会导致无法使用default下拉刷新

4.2 页面滚动到底部的事件（onReachBottom）

可