【微信小程序】下拉刷新与上拉加载更多-蒲公英云

【微信小程序】下拉刷新与上拉加载更多

悠悠 2022-05-24 04:00 365阅读 0赞

/** * 页面的初始数据 */
data: {
  pageIndex: null,
  allpagenum: null,
  list: [],
  reachBottom: false
},
/** * 生命周期函数--监听页面加载 */
onLoad: function (options) {
  wx.showToast({
    title: '加载中...',
    icon: 'loading',
    duration: 500
  })
  this.setData({
    pageIndex: 1
  })
  this.gainLoadingListData()
},
/** * 页面相关事件处理函数--监听用户下拉动作 */
onPullDownRefresh: function () {
  this.gainLoadingListData()
},
/** * 页面上拉触底事件的处理函数 */
onReachBottom: function () {
  this.setData({
    pageIndex: this.data.pageIndex + 1
  })
  if (this.data.pageIndex <= this.data.allpagenum) {
    wx.showToast({
      title: '加载中...',
      icon: 'loading',
      duration: 500
    })
    this.gainLoadingListData()
  } else {
    this.setData({
      reachBottom: true
    })
  }
},
/** * 加载数据的处理函数 */
gainLoadingListData: function () {
  let that = this;
  let pageIndex = that.data.pageIndex;
  let openid = wx.getStorageSync('openid');
  wx.request({
    url: xxx,
    method: 'POST',
    data: {
      openid: openid,
      pageIndex: pageIndex
    },
    success: function (res) {
      var list = that.data.list;
      if (res) {
        for (var i = 0; i < res.data.data.length; i++) {
          list.push(res.data.data[i]);
        }
        that.setData({
          list: list,
          allpagenum: res.data.allpagenum  // 在第一页加载时让后台传参中包括总页数，这样方便后来的上拉加载更多判断是否到达最后一页并让“已到底部”设置为true进行显示
        });
      }
    },
  })
},
<view wx:if="{ { reachBottom}}"> <view class="weui-footer"> <view class="weui-footer__text">我也是有底线的！</view> </view> </view>