微信小程序雲開發-列表數據分頁加載顯示

一、准備工作

1、創建數據庫nums，向數據庫中導入108條數據

 

 2、修改數據庫表nums的權限

二、新建頁面ListPaginated

1、wxml文件

<!-- 顯示列表數據 -->
<view wx:for="{{list}}" class="list">
<text>id：{{item._id}}</text>，
<text>num：{{item.num}}</text>
</view>

 

2、wxss文件

.list{
  height: 150rpx;
  border: 1rpx solid #c3c3c3;
}

 

3、js文件

js文件實現的功能，重要指示點整理如下：

• 在頁面下拉觸底的時候實現分頁加載數據
• 分頁加載數據的時候保留前面已加載完成的數據
• 借助列表數據長度len來精簡代碼
• 數據加載中和數據加載完成 隱藏數據加載的提示語

Page({
  data: {
    list:[]   //初始化list空數組，存儲獲取的列表數據
  },

  //生命周期函數--監聽頁面加載
  onLoad: function (options) {
    this.getList()  //頁面加載的時候 page = 0
  },

  //獲取列表數據
  getList(){
    //數據加載中的友好提示
    wx.showLoading({
      title: '數據加載中',
    })    
    console.log("當前list的長度：",this.data.list.length);
    let len = this.data.list.length           //當前list的長度賦值給變量len
    wx.cloud.database().collection("nums")
    .skip(len)    //skip跳過len長度
    .get()
    .then(res=>{
      //數據加載成功，隱藏加載提示
      wx.hideLoading()
      console.log("查詢成功",res);
      //數據加載完成的友好提示
      let dataList = res.data
      if(dataList.length<=0){
        wx.showToast({
          title: '數據加載完成',
          icon:"none"
        })
      }
      this.setData({
        //保留前面加載過的數據，使用concat連接
        list:this.data.list.concat(res.data)
      })
    })
    .catch(err=>{
      //數據加載失敗，隱藏加載提示
      wx.hideLoading()
      console.log("查詢失敗",err);
    })
  },

//頁面上拉觸底事件的函數
onReachBottom(){
  console.log("頁面上拉觸底事件的函數");
  this.getList()  
}

})

 

 三、效果展示