【微信小程序】 雲數據頁面上拉加載數據

找了很久，網站上直接搜不到 = =，生氣了

 

把之前找到的貼一下

1.邏輯

wx.cloud.init()
let currentPage = 0 // 當前第幾頁,0代表第一頁 
let pageSize = 10 //每頁顯示多少數據 
Page({
  data: {
    dataList: [], //放置返回數據的數組  
    loadMore: false, //"上拉加載"的變量，默認false，隱藏  
    loadAll: false //“沒有數據”的變量，默認false，隱藏  
  },
  //頁面顯示的事件
  onShow() {
    this.getData()
  },
  //頁面上拉觸底事件的處理函數
  onReachBottom: function () {
    console.log("上拉觸底事件")
    let that = this
    if (!that.data.loadMore) {
      that.setData({
        loadMore: true, //加載中  
        loadAll: false //是否加載完所有數據
      });
      //加載更多，這裏做下延時加載
      setTimeout(function () {
        that.getData()
      }, 2000)
    }
  },
  //訪問網絡,請求數據  
  getData() {
    let that = this;
    
    //第一次加載數據
    if (currentPage == 1) {
      this.setData({
        loadMore: true, //把"上拉加載"的變量設爲true，顯示  
        loadAll: false //把“沒有數據”設爲false，隱藏  
      })
    }
    //雲數據的請求
    wx.cloud.database().collection("userlist")
      .skip(currentPage * pageSize) //從第幾個數據開始
      .limit(pageSize)
      .get({
        success(res) {
          if (res.data && res.data.length > 0) {
            console.log("請求成功", res.data)
            currentPage++
            //把新請求到的數據添加到dataList裏  
            let list = that.data.dataList.concat(res.data)
            that.setData({
              dataList: list, //獲取數據數組    
              loadMore: false //把"上拉加載"的變量設爲false，顯示  
            });
            if (res.data.length < pageSize) {
              that.setData({
                loadMore: false, //隱藏加載中。。
                loadAll: true //所有數據都加載完了
              });
            }
          } else {
            that.setData({
              loadAll: true, //把“沒有數據”設爲true，顯示  
              loadMore: false //把"上拉加載"的變量設爲false，隱藏  
            });
          }
        },
        fail(res) {
          console.log("請求失敗", res)
          that.setData({
            loadAll: false,
            loadMore: false
          });
        }
      })
  },
})

2.視圖

<scroll-view scroll-y="true" bindscrolltolower="searchScrollLower">
  <view class="result-item" wx:for="{{dataList}}" wx:key="item">
    <text class="title">{{item.note}}</text>
  </view>
  <view class="loading" hidden="{{!loadMore}}">正在載入更多...</view>
  <view class="loading" hidden="{{!loadAll}}">已加載全部</view>
</scroll-view>

3.樣式

page {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.result-item {
  display: flex;
  flex-direction: column;
  padding: 20rpx 0 20rpx 110rpx;
  overflow: hidden;
  border-bottom: 2rpx solid #e5e5e5;
}
.title {
  height: 110rpx;
}
.loading {
  position: relative;
  bottom: 5rpx;
  padding: 10rpx;
  text-align: center;
}