1.基础操作与云函数区别
分页可以运行数据库的简单操作进行查询，也可用云函数进行查询。
重点：基础操作输出的只有20条数据，云函数可以自定义，最高100条
接下来我就从基础操作与云函数两方面进行分页的编写
首先需要自己准备个数据集num,上传到云数据库
我的数据库，免费下载！
2.基础操作进行分页
1.编写js部分
// pages/fenye/fenye.js Page({ data: { list: [] }, onLoad(options) { this.getList() }, getList() { wx.showLoading({ title: '加载中...', }) let len = this.data.list.length console.log('当前list的长度', len) wx.cloud.database().collection('num') .skip(len) .get() .then(res => { console.log('请求成功', res) //成功就隐藏‘加载中’的提示 wx.hideLoading() //如何最新返回的数据为空，就提示 if (res.data <= 0) { wx.showToast({ icon: 'none', title: '已经掏空了！', }) } //携带的数据 this.setData({ list: this.data.list.concat(res.data) //数据的追加，如1 => 1,2 => 1,2,3 }) }) .catch(res => { //失败也隐藏‘加载中’的提示 wx.hideLoading() console.log('请求失败', res) }) }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { this.getList() console.log('sss') } })
2.修改wxml部分
<!--pages/fenye/fenye.wxml--> <view wx:for="{{list}}"> <view class="num"> {{item.num}} </view> </view>
3.修改wxss部分
.num{ height: 200px; background-color: gold; border-bottom: 1px solid red; }
3.云函数进行分页
1.修改js部分
// pages/fenye-yun/fenye-yun.js Page({ data: { list: [] }, onLoad(options) { this.getList() }, getList() { wx.showLoading({ title: '加载中...', }) let len = this.data.list.length console.log('当前list的长度', len) //调用云函数 wx.cloud.callFunction({ name: 'fenye', data: { len: len, //数据索引 pageNum: 50, //每页加载多少条数据 } }).then(res => { wx.hideLoading() console.log('请求成功', res.result.data) let dataList = res.result.data if (dataList <= 0) { wx.showToast({ icon: 'none', title: '已经掏空了！', }) } //携带的数据 this.setData({ list: this.data.list.concat(dataList) //数据的追加，如1 => 1,2 => 1,2,3 }) }) .catch(res => { wx.hideLoading() console.log('请求失败', res) }) }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { this.getList() } })
2.编写云函数的index.js ,
千万不要忘了上传到云上，进行云函数的部署
// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 云函数入口函数 exports.main = async (event, context) => { return await cloud.database().collection('num') .skip(event.len) //数据索引 .limit(event.pageNum) //每页加载多少条数据 .get() }
3.修改wxml部分
<!--pages/fenye-yun/fenye-yun.wxml--> <view wx:for="{{list}}" wx:key="index"> <view class="num"> {{item.num}} </view> </view>
4.修改wxss部分
/* pages/fenye-yun/fenye-yun.wxss */ .num{ height: 200px; background-color: gold; border-bottom: 1px solid red; }
感谢大家，点赞，收藏，关注，评论！
