微信小程序云开发-列表数据分页加载显示

一、准备工作

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

})

 

 三、效果展示