微信小程序分页加载数据~上拉加载更多~小程序云数据库的分页加载
我们在开发小程序时,一个列表里难免会有很多条数据,比如我们一个列表有1000条数据,我们一下加载出来,而不做分页,将会严重影响性能。所以这一节,我们来讲讲小程序分页加载数据的实现。
老规矩,先看效果图
[图片]
可以看到我们每页显示10条数据,当滑动到底部时,会加载第二页的数据,再往下滑动,就加载第三页的数据。由于我们一共21条数据,所以第三页加载完以后,会有一个“已加载全部数据”的提示。
本节知识点
1,小程序分页加载
2,小程序列表显示
3,云数据库的使用
4,云数据库分页请求数据的实现
一,先定义数据
我们做分页数据加载,肯定要先准备好数据,数据已经给大家准备好,如下图,文章末尾会贴出数据源和本节课源码的下载地址。
[图片]
然后把数据导入到我们的云开发的数据库里,关于数据如何导入,这里不再讲解,不知道的同学,请看下面这篇文章。或者去老师历史文章里找一下。
《小程序云开发入门—云数据库数据源的导入与导出》
下面给大家看下我们的数据源,长什么样。其实很简单,就是简单的定义21条数据。
[图片]
然后在看导入到数据库的样子。
[图片]
二,分页请求数据
我们第一步准备好了数据以后,接下来就来讲讲如何在js里做分页加载数据。
首先我们这里用到了小程序云开发数据库的知识点
1,get方法:获取云数据库数据
2,skip方法:跳过前面几条数据,请求后面的数据
3,limit方法:请求多少条数据。
比如下面这段代码,就是跳过前5条,请求从第6条开始往后的10条数据,就是请求6~15的数据,我们做分页加载也就是基于这个原理。
[代码] wx.cloud.database().collection("list")
.skip(5) //从第几个数据开始
.limit(10)
[代码]
下面把我们index.js的完整代码贴给大家。
[代码]//老师微信:2501902696
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
});
}
})
},
})
[代码]
上面的代码就是我们实现分页加载的所有逻辑代码。简单说下代码
1,我们首先进页面时会请求前10条内容
2,10条内容请求成功以后,我们会把请求到的内容加入dataList数组,然后把dataList里的数据显示到页面上。并将currentPage加一,用于请求第二页数据。
3,当用户滑动到底部时,会触发onReachBottom事件,在这个事件里做第二页到请求。然后第二页数据请求成功以后。继续将currentPage加1,这里要记住一定,一定要请求成功以后才将currentPage +1。
三,列表布局和样式
其实index.wxml和index.wxss的代码很简单,给大家把代码贴出来。
1,index.wxml
[代码]<scroll-view scroll-y="true" bindscrolltolower="searchScrollLower">
<view class="result-item" wx:for="{{dataList}}" wx:key="item">
<text class="title">{{item.content}}</text>
</view>
<view class="loading" hidden="{{!loadMore}}">正在载入更多...</view>
<view class="loading" hidden="{{!loadAll}}">已加载全部</view>
</scroll-view>
[代码]
2,index.wxss
[代码]page {
display: flex;
flex-direction: column;
height: 100%;
}
.result-item {
display: flex;
flex-direction: column;
padding: 20rpx 0 20rpx 110rpx;
overflow: hidden;
border-bottom: 2rpx solid #e5e5e5;
}
.title {
height: 110rpx;
}
.loading {
position: relative;
bottom: 5rpx;
padding: 10rpx;
text-align: center;
}
[代码]
到这里我们就完整的实现里分页加载功能了。
[图片]
源码和数据源,已经给大家放到网盘里了,有需要的同学请在文章底部留言,或者私信老师。
视频讲解:https://edu.csdn.net/course/detail/9604