微信小程序前端实现分页功能--后端把几百条数据一股脑的全给了前端，前端自己实现分页加载、下拉刷新等

json中开启下拉刷新 "enablePullDownRefresh": true,

{
  "navigationBarTitleText": "住客评价",
  "enablePullDownRefresh": true, 
  "backgroundColor": "#13063C"
}

1、data 中储存返回的全部数据 和 当前展示数据

 

2、onload中初次请求数据 以及 展示第一页的数据

onLoad (options) {
    let _this = this
    let obj = {
      store_id:'00021'
    }
    app.request('dispatch/getStoreInfo', obj,function (res){
      let list = res.data.comment
      let qielist = list.slice(_this.data.page-1,_this.data.pagesize)
      //slice第一个参数是page-1，就是从0开始截取到pagesizi 8
      _this.setData({
        yaolist:list,     //全部数据
        showlist:qielist, //刚进来第一次展示数据
      })
      // console.log(_this.data.yaolist);
    })
  },

3、页面上拉触底 加载更多--分页功能

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom () {
    wx.showLoading({
      title: '加载中',
    })
    let shu = this.data.page
    this.setData({
      page:shu+1
    })
    let num = (this.data.page-1)*this.data.pagesize   
    let num2 = num+this.data.pagesize
    let arr = this.data.yaolist
    let qielist = arr.slice(num,num2)
    let slist = this.data.showlist
    let newarr = slist.concat(qielist)
    this.setData({
      showlist:newarr
    })
    console.log(this.data.showlist);
    setTimeout(function () {
      wx.hideLoading()
    }, 300)
  },

4、下拉刷新

   onPullDownRefresh () {  
    wx.showLoading({
      title: '加载中',
    })
    this.onRefresh();
  },
    onRefresh(){
    //在当前页面显示导航条加载动画 
    wx.showNavigationBarLoading();
    //显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框 
    this.searchList();
  },

  searchList(){
    this.setData({
      page:1,
    })
    let arr = this.data.yaolist
    let qielist = arr.slice(this.data.page-1,this.data.pagesize)
    this.setData({
      showlist:qielist
    })
    console.log(this.data.showlist);
    setTimeout(function () {
      wx.hideLoading()
      wx.hideNavigationBarLoading();
      //停止下拉刷新
      wx.stopPullDownRefresh();
    }, 1000)

  },