微信小程序下拉刷新上拉加载

1.首先配置app.json(全部页面均可刷新)或当前页.json : "enablePullDownRefresh": "true";(注意值是字符串,不是布尔类型)json

2.要点:下拉:onPullDownRefresh: function () {};上拉:onReachBottom: function () {}网络

3.说明:var pageIndex (页码);var rowCount (每页记录数);接口返回:totalPages(总页数)app

4.下拉刷新:清空已经写入的数据,从新获取pageIndex=1时的数据;this

上拉加载:每次加载,页数加1,而后调用接口获取对应页码数据;当前页面数小于或等于总页数的时候,则能够继续加载;反之,加载完成。url

 代码举例code

var pageIndex = 1;
var rowCount = 15;
Page({
  data: {
    salesRecordArr: []
  },
  onLoad: function (options) {
     pageIndex = 1
    saleRecordsRequest(this);
  },
  //下拉 
  onPullDownRefresh: function () {
    pageIndex = 1;
    this.setData({
      salesRecordArr: [],
    });
    wx.showToast({
      title: 'loading',
      icon: 'loading',
      duration: 1000
    })
    saleRecordsRequest(this);
  },

  //上拉 
  onReachBottom: function () {
    if (pageIndex <= this.data.dataCount) {
      wx.showToast({
        title: 'loading',
        icon: 'loading',
        duration: 1000
      })
      saleRecordsRequest(this);
    } else {
      wx.showToast({
        title: '已加载完',
        icon: 'loading',
        duration: 1000
      })
    }
  }
})

var saleRecordsRequest = function (that) {
  var params = new Object()
  params.shopId = “”
  params.pageIndex = pageIndex
  params.rowCount = rowCount

// 网络请求
  requestServer.POST(
    {
      url: ‘……’,
      tradeId: '...',
      params: params,
      success: function (res) {

        if (!check.checkIsNotNull(res.data)) {
        } else {
          
          var salesRecordArr = that.data.salesRecordArr
          for (var i = 0; i < res.data.body.items.length; i++) {
            salesRecordArr.push(res.data.body.items[i]);
          }
          that.setData({
            salesRecordArr: salesRecordArr,
            dataCount: res.data.body.totalPages
          })
          pageIndex++;
        }
        wx.stopPullDownRefresh();
      },
      fail: function () {
        console.log(res)
      },
    })
}
相关文章
相关标签/搜索