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

一、前言

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.dataListconst 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>

五、常规结语

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

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

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

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

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！