赞
踩
原文链接:
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函数里面给两个变量重新赋值
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。