小程序實現分頁效果

方法一

首先說明小程序的兩個事件

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