解决提取大量数据耗时问题
首先先建立一个较大的数据库,最好数据量超过80,如图:
然后在页面的wxml文件写入页面结构,如下:
<scroll-view scroll-y="true" bindscrolltolower="searchScrollLower">
<view class="result-item" wx:for="{{dataList}}" wx:key="item">
<text class="title">{{item.schoolName}}</text>
</view>
<view class="loading" hidden="{{!loadMore}}">正在载入更多...</view>
<view class="loading" hidden="{{!loadAll}}">已加载全部</view>
<view>{{onshow}}</view>
</scroll-view>
在这个例子里bindscrolltolower="searchScrollLower"好像没起什么用,我把它删了也不影响使用,但是我写其它的页面时发现必须要写bindscrolltolower的函数,通过它来实现触底加载的,所以我建议把这个写上去。
然后是页面的js代码:代码写的很乱,问题主要在每次重新进入页面时,返回的结果老是接着上次的,弄了好久,我才发现在onLoad上加一个this.page=0就行了,意思是保证每次重新进入页面时当前页面为0,也就是第一个页面
let pageSize = 20 //每页显示多少数据
var page=0
var currentPage=0
// 当前第几页,0代表第一页
const db=wx.cloud.database()
Page({
data: {
dataList: [], //放置返回数据的数组
loadMore: false, //"上拉加载"的变量,默认false,隐藏
loadAll: false ,//“没有数据”的变量,默认false,隐藏
onshow:""
},
// 页面显示的事件
// onShow() {
// this.getData()
// },
onLoad(){
var that=this
let options=0
// db.collection("0").get({
// success(res){
// console.log("sdkjkf")
// console.log(res.data)
// that.setData({
// dataList:res.data,
// })
console.log("000")
this.page=0
that.getData(0)
// }
// })
},
// onShow(){
// console.log("000")
// this.getData(-1)
//this.setData({
//onshow:"zhangsan"
// })
//},
//页面上拉触底事件的处理函数
onReachBottom: function() {
console.log("上拉触底事件")
// var currentPage=0s
let that = this
if (!that.data.loadMore) {
that.setData({
loadMore: true, //加载中
loadAll: false //是否加载完所有数据
});
//加载更多,这里做下延时加载
setTimeout(function() {
that.getData(page)
console.log("onReachBottom的page:"+page)
}, 1000)
}
},
//访问网络,请求数据
getData(currentPage) {
let that = this;
//第一次加载数据
if (currentPage == 0) {
this.setData({
loadMore: true, //把"上拉加载"的变量设为true,显示
loadAll: false //把“没有数据”设为false,隐藏
})
console.log("首次加载")
}
//云数据的请求
console.log("请求数据库时")
console.log("currentPage:"+currentPage)
wx.cloud.database().collection("0")
.skip(currentPage * pageSize) //从第几个数据开始
.limit(pageSize)
.get({
success(res) {
if (res.data && res.data.length > 0) {
console.log("请求成功", res.data)
currentPage++
page=currentPage
console.log("page:"+page)
console.log("currentPage:"+currentPage)
//把新请求到的数据添加到dataList里
let list = that.data.dataList.concat(res.data)
that.setData({
dataList: list, //获取数据数组
loadMore: false //把"上拉加载"的变量设为false,显示
});
console.log("datalist:")
console.log(that.data.dataList)
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
});
}
})
},
})
最后是css代码:
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;
}
微信云数据库分页提取数据