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

来源:互联网 发布:网络视频广告的形成 编辑:程序博客网 时间:2024/06/16 10:19

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()        }      })    }  }})
原创粉丝点击