微信小程序分页功能(上拉触底事件)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/z834410038/article/details/77532899

js核心代码

Page({

  data: {
    // 前台显示list
    showlist: [],
    // 当前页
    pageNumber: 1,
    // 总页数
    totalPage: 1,

  },

  onLoad: function (options) {
    var self = this;
    // 请求后台 
    // 获取第一页的list及总页数
    wx.request({
      url: '',
      data: {

      },
      success: function (res) {
          self.setData({
            showlist: res.data.list,
            totalPage: res.data.totalPage,
          })
      },
      fail: function (res) {

      }
    })
  },
    /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    var self = this;
    // 当前页+1
    var pageNumber = self.data.pageNumber + 1;

    self.setData({
       pageNumber: pageNumber,
    })

    if (pageNumber <= self.data.totalPage) {
      wx.showLoading({
        title: '加载中',
      })
      // 请求后台,获取下一页的数据。
      wx.request({
        url: '',
        data: {
          pageNumber: pageNumber,
        },
        success: function (res) {
          wx.hideLoading()
          // 将新获取的数据 res.data.list,concat到前台显示的showlist中即可。
          self.setData({
            showlist: self.data.showlist.concat(res.data.list)
          })
        },
        fail: function (res) {
          wx.hideLoading()
        }
      })
    }

  }
})
展开阅读全文

没有更多推荐了,返回首页