在小程序开发中使用下拉刷新和上拉加载非常多，比如常用的展示型首页，而实现这个功能有两种形式，第一种是使用 scroll-view 组件，第二种是不使用 scroll-view 组件而让整个页面刷新，那就分别都在此简单分享下。
方法一
在 scroll-view 里设定 bindscrolltoupper 和 bindscrolltolower 监听页面滑动到顶部和底部，调用两个方法然后分别根据自己业务逻辑处理即可。
详情见 scroll-view 组件
直接上代码
注意使用竖向滚动时，需要给<scroll-view/>一个固定高度才能监听滚动事件，通过 WXSS 设置 height 。
index.wxml
<!--index.wxml--><view><scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" class="list" bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad" bindscroll="scroll"><view class="item" wx:for="{{list}}"><image class="img" src="{{item.pic_url}}"></image><view class="text"><text class="title">{{item.name}}</text><text class="description">{{item.short_description}}</text></view></view></scroll-view><view class="body-view"><loading hidden="{{hidden}}" bindchange="loadingChange">加载中...</loading></view></view>
index.js
var url = "https://xxx";var page = 1;var page_size = 5;// 请求数据var loadMore = function (that) {that.setData({hidden: true});wx.request({url: url,data: {page: page,page_size: page_size,},header: {'content-type': 'application/json'},success: function (res) {var list = that.data.list ;for(var i = 0; i < res.data.data.length; i++){list.push(res.data.data[i]);}that.setData({list: list});page++;that.setData({hidden: false});}});}Page({data: {hidden: true,list: [],scrollTop: 0,scrollHeight: 0},onLoad: function () {//注意 scroll-view 必须要设置高度才能监听滚动事件，需要在页面的onLoad事件中给scroll-view的高度赋值var that = this;wx.getSystemInfo({success: function (res) {that.setData({scrollHeight: res.windowHeight});}});loadMore(that);},//下拉加载bindDownLoad: function () {var that = this;loadMore(that);},scroll: function (event) {//该方法绑定了页面滚动时的事件，这里记录了当前的 position.y 的值,为了请求数据之后把页面定位到这里来。this.setData({scrollTop: event.detail.scrollTop});},//上拉刷新topLoad: function (event) {var that = this;//数据刷新page = 0;this.setData({page: 1,list: [],scrollTop: 0});loadMore(that);}})
方法二
整个页面的刷新，使用 onPullDownRefresh 和 onReachBottom 。但是在小程序里，用户顶部下拉是默认禁止的，我们需要把他设置为启用，在 app.json 中的设置对所有页面有效，在单独页面设置则对当前页面有效。
详情见 Page 页面
有人说设置完之后可以下拉，但是看不到图标，需要再设置下拉 loading 样式。
{"window":{"backgroundTextStyle": "dark","enablePullDownRefresh": true}}
直接上代码
下拉刷新
// 下拉刷新 onPullDownRefresh: function () {// 显示顶部刷新图标 wx.showNavigationBarLoading();var that = this;wx.request({url: 'https://xxx',method: "POST",data:{page : page,page_size : page_size,},header: {'content-type': 'application/json'},success: function (res) {that.setData({moment: res.data.data});// 设置数组元素 that.setData({moment: that.data.moment});// 隐藏导航栏加载框 wx.hideNavigationBarLoading();// 停止下拉动作 wx.stopPullDownRefresh();}})},
上拉加载更多
//上拉加载onReachBottom: function () {var that = this;// 显示加载图标 wx.showLoading({title: '加载中...',})page++;;wx.request({url: 'https://xxx/'，method: "POST",data:{page : page,page_size : page_size,},header: {'content-type': 'application/json'},success: function (res) {// 回调函数 var moment_list = that.data.moment;for (var i = 0; i < res.data.data.length; i++) {moment_list.push(res.data.data[i]);}// 设置数据 that.setData({moment: that.data.moment})// 隐藏加载框 wx.hideLoading();}})},
参考以上例子就可以下拉刷新、上拉加载， 示例仅提供一个思路，具体的实现需要开发者根据自己项目来定。
码字不易，转载请注明出处。
