小程序实现分页效果

方法一

首先说明小程序的两个事件

<1>页面相关事件处理函数–监听用户下拉动作

onPullDownRefresh: function () { },

<2>页面上拉触底事件的处理函数

onReachBottom: function () { },

监听用户下拉动作

onPullDownRefresh: function () {
　　console.log('下拉刷新…');
　　wx.showNavigationBarLoading() //在标题栏中显示加载
　　this.data.pageNo = 1
　　// 刷新并初始化数据
　　this.getdata();
　　//延时处理数据
　　setTimeout(() => {
　　　//关闭加载　
      wx.hideNavigationBarLoading();
      wx.stopPullDownRefresh();
    }, 1000);
},

监听上拉触底动作

onReachBottom: function () {
    //上拉分页,将页码加1，然后调用分页函数loadRoom()
    var that = this;
    var pageNo = that.data.pageNo;
    that.setData({
      pageNo: ++pageNo
    });
    wx.showToast({
        title: '加载中..',
        icon: 'loading'
      }),
      setTimeout(function () {
        that.loaddata();
      }, 1000)
  },

注意：

项目需求如果上拉触底是在原有数据基础上，在数据集合后面继续追加数据，可以在数据加载的接口中这样写

if (i.state == 200) {
        console.log(i.data)
        //这个地方判断当前pageNo是否已经大于1
        if (that.data.pageNo > 1) {
          //定义一个aa变量，将之前的数据赋值给aa      
          let aa = that.data.mydata
          //通过循环继续往aa里追加数据  
          for (let index = 0; index < i.data.length; index++) {
            const element = i.data[index];
            aa.push(element)
          }
          that.setData({ mydata: aa})
        } else if (that.data.pageNo == 1) {
          let aa = [];
          for (let index = 0; index < i.data.length; index++) {
            const element = i.data[index];
            aa.push(element)
          }
          that.setData({mydata: aa})
        }
        console.log(that.data.mydata)
} else {
   wx.showToast({
     title: i.data.msg,
     icon: 'none'
   })
}