基于微信小程序云开发实现分页查询功能

一、前言

hello，大家好呀～
很久没写博客啦～开局先来吹一下水，凑一下字数。

本文是微信小程序云开发的入门篇（算是吧？），主要是实现基于云开发下的数据分页获取。

二、为啥要分页

原因主要有以下3点：
1、数据条数限制
小程序端单次请求数据条数限制为20条，云函数端为1000条。

2、小程序端的性能
即使走云函数，一次性拿几百条，对于小程序端来说也有渲染性能上的损耗，所以一般项目上基本都是按需拿，一次拿20-50条。

3、节省资源
目前云开发的价格计算方式已经改变，同时价格相对来说有所上涨，所以为了节省资源，也需要做一下分页。

三、实现的需求

本文实现的需求很简单，首先从数据库读取20条数据，当页面触底后，再去拉去20条数据依次类推，实现分页的效果。

我事先准备了100条数据作为测试，分页效果看下方视频。

云开发分页效果

四、代码实现

因为比较简单，所以就只放JS代码了。代码内已经添加注释了。

JS实现代码

const db = wx.cloud.database()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    dataList: [],
  },

  onLoad() {
    this.initData()
  },

  /**
   * 初始化数据
   */
  async initData() {
    wx.showLoading({
      title: "加载中",
      mask: true
    })
    const dataList = await this.getDataList()
    this.setData({ dataList })
    console.log("dataList ==>", dataList)
    wx.hideLoading()
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  async onReachBottom() {
    const dataList = this.data.dataList
    const nowLen = dataList.length
    // 当数据少于20条时，则说明符合条件的数据不足20条了不需要分页
    if (nowLen < 20) {
      wx.showToast({
        title: "已经加载完毕啦",
        icon: "none"
      })
      return
    }
    wx.showLoading({
      title: "加载更多中",
      mask: true
    })
    const newDataList = await this.getDataList(20, nowLen)
    wx.hideLoading()
    // 没有新的数据了
    if (newDataList.length === 0) {
      wx.showToast({
        title: "已经加载完毕啦",
        icon: "none"
      })
      return
    }

    // 拼接数据并进行渲染
    this.data.dataList = dataList.concat(newDataList)
    this.setData({
      dataList: this.data.dataList
    })
  },

  /**
   * 获取数据
   * @param {*} limit 本次获取的条数
   * @param {*} skip 跳过的条数
   */
  async getDataList(limit = 20, skip = 0) {
    const dataListObj = await db.collection("addTest").where({}).limit(limit).skip(skip).get()
    return dataListObj.data
  },

})

WXML

布局也简单放一下吧。

<view class="data-item" wx:for="{{dataList}}" wx:key="_id">
 {{index + 1}}、{{item.name}} ---- {{item.age}}
</view>

五、常规结语

代码为最简单的例子，仅供参考，实际开发中的其他逻辑就不写了。需要同学们自己去考虑异常情况处理等问题啦。

有任何疑问可以在评论区留下。我每天都会进行回复，私聊不回。（为了刷积分）

以上均是本人开发过程中的一些经验总结与领悟，如果有什么不正确的地方，希望大佬们评论区斧正。

💥最后！！！不管这篇文章对你有没有用，既然都看到最后了。
👍赞一个！！！
🤩当然，顺带收藏就最好了。
😎欢迎转载，原创不易，转载请注明出处✍。

😊如果你对小程序开发有兴趣或者正在学习小程序开发，可以关注我。每一篇都是原创，每一篇都是干货噢~。