微信小程序-如何分页加载数据

小程序通过数据库读取数据一次最多读取20条，云函数一次最多读取100条，所以如果我们要读取更多的数据就要借助分页加载，通过分次的加载数据，然后将每次获取到的数据拼接起来，就可以在页面显示更多的数据。

1、创建数据

首先在云开发数据库里新建一个有足够多数据的集合，最好在50条以上

2、使用说明

分页取数据主要用到的函数是用于分割的skip()和限制条数的limit()
具体的使用方法可以看官方说明文档：点击此处跳转

3、实现效果

每次触底都会加载数据

数据加载完毕

4、实现代码

index.js

let totalData = 1
let db=wx.cloud.database()
Page({
  data: {
    dataList:[],
    tip:'加载更多数据...'
  },

  onLoad: function (options) {
    db
    .collection('Student').count() //获取数据总数
    .then(res => {
        console.log("数据总条数", res.total)
        totalData = res.total
      })
    this.getDataList()
  },

  //获取数据
  getDataList() {
    let len = this.data.dataList.length
    console.log("list的长度", len)
    if (totalData == len) {
      wx.showToast({
        title: '没有更多数据啦',
        icon:"none"
      })
      this.setData({
        tip:'数据已全部加载'
      })
      return
    }
    wx.showLoading({
      title: '加载中',
    })

   db
      .collection('Student')
      .skip(len)
      .limit(15)
      .get()
      .then(res => {
        console.log('获取成功', res)
        var shuzu = this.data.dataList.concat(res.data)   //拼接数组
        this.setData({
          dataList:shuzu 
        })
        console.log("当前数组",shuzu)   //显示每次拼接后的数组
        wx.hideLoading()
      })
      .catch(res => {
        wx.showToast({
          title: '加载失败',
        })
      })
  },
 

   // 页面上拉触底事件的处理函数
  onReachBottom: function() {
    this.getDataList()
  },

})

index.wxml

<block wx:for="{{dataList}}" wx:key="index">
  <view class="section">{{item.num}}view>
block>
<view>{{tip}}view>

index.wxss

.section {
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid gainsboro;
  height: 80rpx;
}

注意在app.js里进行环境初始化

  onLaunch: function() {
    wx.cloud.init({
      env: ""  //在此处填入环境ID
    })
  }