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

悠悠 2022-05-24 04:00 317阅读 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>