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

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()
        }
      })
    }

  }
})
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值