微信小程序开发之上拉刷新

小程序的顶部和底部都有默认的监听事件，这个组件的官方文档scroll-view，这个组件的属性如下：

scroll-view

可滚动视图区域

其中scroll-y,bindscrolltolower,bindscrolltoupper三个组件是分页需要用到的。

实现程序

1. 我们需要在*.wxml中声明这个组件，组件内容加入需要展示的内容

   <!--
   - scroll-y="true" 为纵向滚动的必要声明
   - bindscrolltolower="loadMore" 为页面底部的监听事件，即上拉刷新事件
   - bindscrolltoupper="refresh" 为页面顶部的监听事件，即下拉刷新事件
   -->
   <scroll-view class="scroll-box" style="height:{{winHeight}}" scroll-y="true" bindscrolltolower="loadMore" bindscrolltoupper="refresh">
       <!--内容部分-->
       <view class="content">
         <view wx:for="{{content}}" wx:key="item">
          ……
         </view>
       </view>
   </scroll-view>

2. 针对顶部和底部的监听事件进行业务处理

   //获取应用实例
   var app = getApp();
   Page({
     data: {
       userInfo: {},
       content: [],
       winHeight: 0
     },
     page: {//分页查询参数
       pageNum: 1,//初始页码
       pageSize: 10,//单页条数
       dataSize: 0,//总数据条数，初始为0
       hasRefresh: true //刷新状态
     },
     onLoad: function () {//页面初始加载事件
       var that = this;//复制this对象到临时变量
       wx.getSystemInfo({
         success: function (res) {
           that.setData({
             winHeight: res.windowHeight
           });
         }
       })
       loadData(that);
     },
   
     loadMore: function () {
       wx.showToast({
         title: '刷新中…',
         icon: 'loading',
         duration: 1000
       });
       var that = this;
       loadData(that);
     },
     refresh: function () {
       console.log("下拉刷新....")
       this.onLoad();
     }
   })
   //数据加载
   var loadData = function (that) {
     var pageCount = 1;
     if (that.page.dataSize > 0 && that.page.dataSize % that.page.pageSize == 0) {
       pageCount = parseInt(that.page.dataSize / that.page.pageSize);
     } else {
       pageCount = parseInt(that.page.dataSize / that.page.pageSize) + 1;
     }
     if (!that.page.hasRefresh) {
       return;
     }
     that.page.hasRefresh = false;//阻塞标识符，防止本次处理未结束前出现重复请求
     var limit_start = that.page.pageSize * (that.page.pageNum - 1);
     var limit_end = that.page.pageSize * that.page.pageNum;
     if (that.page.pageNum > pageCount) {
       return;
     }
     wx.request({
       url: 'https://*****/goods/list',
       data: {
         limit_start: limit_start,
         limit_end: limit_end
       },
       method: 'GET',
       header: {
         'content-type': 'application/json'
       },
       success: function (res) {
         that.setData({
           content: that.data.content.concat(res.data.list)
         });
         that.page.dataSize = limit_start == 0 ? res.data.dataSize : that.page.dataSize;
         that.page.pageNum++;
         that.page.hasRefresh = true;//释放阻塞
       }
     })
   }

注意事项

1. 分页数据拼装到一页进行显示时，需要将每次请求的结果集进行合并处理，参考上文中

   success: function (res) {
     that.setData({
       'content: that.data.content.concat(res.data.list)'
     });
   }

2. scroll-view标签设置了bindscrolltolower，实现上拉加载时，数据重复请求

   小程序的请求处理需要一定时间，而实际使用中，在请求结束前经常发生多次触发底部监听事件的情况，小程序组件中并为对此做处理，需要我们额外增加标识位来阻塞重复请求，参考样例代码中`hasRefresh`的处理