原文链接:
https://developers.weixin.qq.com/community/develop/article/doc/000a2287318888d8a2b856e0750813
内容:
我们在开发小程序时,一个列表里难免会有很多条数据,比如我们一个列表有1000条数据,我们一下加载出来,而不做分页,将会严重影响性能。所以这一节,我们来讲讲小程序分页加载数据的实现。
可以看到我们每页显示10条数据,当滑动到底部时,会加载第二页的数据,再往下滑动,就加载第三页的数据。由于我们一共21条数据,所以第三页加载完以后,会有一个“已加载全部数据”的提示。
分页请求数据
我们第一步准备好了数据以后,接下来就来讲讲如何在js里做分页加载数据。
首先我们这里用到了小程序云开发数据库的知识点
1,get方法:获取云数据库数据
2,skip方法:跳过前面几条数据,请求后面的数据
3,limit方法:请求多少条数据。
比如下面这段代码,就是跳过前5条,请求从第6条开始往后的10条数据,就是请求6~15的数据,我们做分页加载也就是基于这个原理。
wx.cloud.database().collection("list")
.skip(5) //从第几个数据开始
.limit(10)
下面把我们index.js的完整代码贴给大家
let currentPage = 0 // 当前第几页,0代表第一页
let pageSize = 10 //每页显示多少数据
Page({
data: {
dataList: [], //放置返回数据的数组
loadMore: false, //"上拉加载"的变量,默认false,隐藏
loadAll: false //“没有数据”的变量,默认false,隐藏
},
//页面显示的事件
onShow() {
this.getData()
},
//页面上拉触底事件的处理函数
onReachBottom: function() {
console.log("上拉触底事件")
let that = this
if (!that.data.loadMore) {
that.setData({
loadMore: true, //加载中
loadAll: false //是否加载完所有数据
});
//加载更多,这里做下延时加载
setTimeout(function() {
that.getData()
}, 2000)
}
},
//访问网络,请求数据
getData() {
let that = this;
//第一次加载数据
if (currentPage == 1) {
this.setData({
loadMore: true, //把"上拉加载"的变量设为true,显示
loadAll: false //把“没有数据”设为false,隐藏
})
}
//云数据的请求
wx.cloud.database().collection("list")
.skip(currentPage * pageSize) //从第几个数据开始
.limit(pageSize)
.get({
success(res) {
if (res.data && res.data.length > 0) {
console.log("请求成功", res.data)
currentPage++
//把新请求到的数据添加到dataList里
let list = that.data.dataList.concat(res.data)
that.setData({
dataList: list, //获取数据数组
loadMore: false //把"上拉加载"的变量设为false,显示
});
if (res.data.length < pageSize) {
that.setData({
loadMore: false, //隐藏加载中。。
loadAll: true //所有数据都加载完了
});
}
} else {
that.setData({
loadAll: true, //把“没有数据”设为true,显示
loadMore: false //把"上拉加载"的变量设为false,隐藏
});
}
},
fail(res) {
console.log("请求失败", res)
that.setData({
loadAll: false,
loadMore: false
});
}
})
},
})
wxml代码我就不放了,详细可以去看原文链接,这里主要说一下遇到的问题:
这是底下的评论,一开始还没看懂这个问题是什么原因,后来遇到了才发现是一个超级坑的问题!!
问题大概是这样:如果一个用户想取列表数据,如果数据数据量较少的时候才会被出现,数据好像只被获取了一次!进入页面的时候获取一次,退出页面再重新进去数据就不见了!根本的原因是把两个变量
let currentPage = 0 // 当前第几页,0代表第一页
let pageSize = 10 //每页显示多少数据
定义为了全局变量,在整个数据块有用,只要整个小程序没有被销毁,这俩数据就一直存在,并且没有重新赋值!每次调用都会在上一次的基础上查数据库!
这是我在底下评论的回答
整体思路解决掉变量作用域的问题,那么就把变量设为页面局部变量就好了
1、就是把变量放在data里面
2、或者是在show函数里面给两个变量重新赋值