【小程序云开发】如何实现列表分页展示(渲染)数据,通过上一页和下一页的方式可以让用户方便地浏览大量的数据
小程序云开发实现列表分页展示数据是一个常见的需求,通过上一页和下一页的方式可以让用户方便地浏览大量的数据。在本文中,我将介绍如何使用小程序云开发来实现这一功能。首先咱们先看效果图

首先,我们需要在小程序云开发中的数据库里创建一个集合(Collection),用来存储我们的数据。在集合中,每个文档(Document)代表一个数据项,我们可以在其中存储相关的字段。举个例子
接下来,我们需要在小程序的前端页面中添加上一页和下一页的按钮,供用户点击。当用户点击按钮时,我们将触发相应的事件来获取下一页或上一页的数据,这里需要根据所在页面与总共页面进行一个判断,来显示上一页和下一页(例如第一页的时候是没有上一页的,最后一页是没有下一页的)

(这里只显示上一页,进行了条件渲染)
在小程序的前端页面中,我们可以使用 wx.cloud.callFunction 方法来调用云函数,也可以不调用云函数直接使用SDK(wx.cloud.database.collection())。我们需要在云函数中编写查询数据的逻辑,并将查询结果返回给前端页面。
下面是一个简单的示例,演示了如何实现基于云开发的列表分页展示功能:
1. 创建集合和文档
在小程序云开发的控制台中,创建一个集合(例如 "list"),并在集合中添加一些文档。每个文档可以包含一些字段,例如 "title"、"content" 等。
2. 前端页面
在前端页面中,添加上一页和下一页的按钮,并为按钮绑定相应的点击事件。其中wx:if为条件渲染,currentPage是一个变量,表示页面当前页,totalye也是一个常量,表示总页面数
<view style="width: 100%;display: flex;justify-content: center;flex-direction: row;align-items: center;margin: 50rpx 0;">
<view bindtap="golast" wx:if="{{currentPage+1 != 1 && currentPage}}" style="padding: 4rpx 14rpx;border: 2rpx solid #8a8a8a;border-radius: 10rpx;font-size: 20rpx;">上一页</view>
<view style="font-size: 20rpx;margin: 0 20rpx;">{{currentPage+1}}/{{totalye}}</view>
<view bindtap="gonext" wx:if="{{currentPage+1 != totalye && totalye}}" style="padding: 4rpx 14rpx;;border: 2rpx solid #8a8a8a;border-radius: 10rpx;font-size: 20rpx;">下一页</view>
</view>
3. 前端页面的 JavaScript 代码
在前端页面的 JavaScript 代码中,我们需要定义上一页和下一页的点击事件,并调用云函数来获取数据。
Page({
data: {
pageSize : 10,
currentPage:0,
totalye:1
dataList: [] // 存储数据的数组
},
// 上一页
golast(){
var currentPage = this.data.currentPage -1
this.setData({
currentPage:currentPage
})
this.onPullDownRefresh()
},
// 下一页
gonext(){
var currentPage = this.data.currentPage + 1
this.setData({
currentPage:currentPage
})
this.onPullDownRefresh()
},
// 获取数据列表
// 获取列表数据
getData(){
var that =this;
wx.cloud.database().collection("uni-textbox")
.orderBy('time','desc')
.skip(that.data.currentPage * that.data.pageSize)
.limit(that.data.pageSize)
.get({
success(res){
let list =that.data.dataList.concat(res.data)
that.setData({
dataList:list,
loading:false
})
},
fail(err){
wx.showToast({
title: '加载失败!'+err,
icon:'error'
})
}
})
},
// 每当点击上一页或下一页时候,清空数据组并重新赋值
onPullDownRefresh() {
var that = this
this.setData({
dataList:[],
})
setTimeout(function(){
wx.stopPullDownRefresh(
that.getData(),
)},100)
},
// 页面加载时获取第一页数据
onLoad() {
this.init();
},
// 页面初始化
init(){
var that = this
//这里直接用API进行查询操作
wx.cloud.database().collection('uni-textbox').count().then(res => {
//统计有多少个数据
// 这里pageSize是每页容量
// totalye就是总的页数
this.setData({
totalye:Math.ceil(res.total / that.data.pageSize),
})
// 分页查询
wx.cloud.database().collection("uni-textbox")
.orderBy('time','desc')
.skip(that.data.currentPage * that.data.pageSize)
.limit(that.data.pageSize)
.get({
success(res){
let list =that.data.dataList.concat(res.data)
that.setData({
dataList:list,
loading:false
});
},
fail(err){
wx.showToast({
title: '加载失败!'+err,
icon:'error'
})
}
})
})
},
});
通过以上步骤,我们就可以实现一个简单的列表分页展示功能。用户可以点击上一页和下一页按钮来浏览不同页的数据。
需要注意的是,以上示例是一个简单的实现方法,实际项目中可能需要根据具体需求进行调整和优化,例如添加加载中的状态、处理边界情况等。
希望本文对你有所帮助,祝你在小程序云开发中实现列表分页展示数据的功能顺利!
更多推荐



所有评论(0)