小程序页面下拉刷新、上拉加载

页面下拉刷新

 /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
      var that = this
       //下拉刷新背景颜色
      wx.setBackgroundColor({
        backgroundColorTop: '#7e7d7d'
      })
      wx.setBackgroundTextStyle({
        textStyle: 'dark'
      })
      setTimeout(function () {
        that.onShow()
        wx.stopPullDownRefresh()//停止刷新
      }, 1500);
  },

 

页面上拉加载 

因为数据比较少，所以设置初始页面数据为 5

data: {
    size:5，
    pageEnd:false,
}

 

 上拉后把页面数据值赋值给接口，并调用，如果接口数据大于页面数据，则显示玩命加载中，页面数据再加5，否则，关闭加载效果并显示”已显示所有数据“

/**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    var receiveData = {
      store: '',
      beginTime: '',
      endTime: '',
      cargoType: '',
      boxTypes: '',
      payType: '',
      type: '',
      page: '1',
      size: this.data.size
    }
    var that = this
    api.getRequest(api.apiUrl.BOX_CENTER_GET, receiveData, function (res) {
      console.log(res.data.data.items)
      var datas = res.data.data.items;
      for (let i = 0; i < datas.length; i++) {
        datas[i]["limitedAt"] = tool.toDate(datas[i]["limitedAt"])
        datas[i]["createdAt"] = tool.getDateDiff(datas[i]["createdAt"])
      }
      that.setData({
        zhaoxiang: datas,
      })
      var size = that.data.size
      if (datas.length>=size){
          wx.showLoading({
            title: '玩命加载中',
        })
        setTimeout(function () {
          wx.hideLoading()
        }, 1000)
        that.setData({
          size: size + 5
        })
      }else{
          wx.showLoading({
            title: '没有更多数据',
          })
        setTimeout(function () {
          wx.hideLoading()
        }, 2000)
        that.setData({
          pageEnd: true,
        })
      }
    })
  },

 

<view wx:if="{{pageEnd==true}}" class='scrollEnd'>已显示所有数据...</view>