微信小程序云数据库的分页提取，解决提取大量数据的耗时问题

解决提取大量数据耗时问题

首先先建立一个较大的数据库，最好数据量超过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=thislet 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=0that.getData(0)// }// })},// onShow(){// console.log("000")// this.getData(-1)//this.setData({//onshow:"zhangsan"// })//},//页面上拉触底事件的处理函数onReachBottom: function() {console.log("上拉触底事件")// var currentPage=0slet that = thisif (!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=currentPageconsole.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;
}

微信云数据库分页提取数据

微信小程序云数据库的分页提取，解决提取大量数据的耗时问题相关推荐

Web端访问微信小程序云数据库
撰写背景: 用微信小程序云开发做了一个与web管理平台配套的微信小程序,Web端需要对接(访问)到云环境的云数据库. 开门见山: 在微信开发者工具里先把云开发控制台打开, 设置->权限设置-&g ...
微信小程序云数据库where查询语句字段名和字段值都可以是变量
微信小程序云数据库where查询语句字段名和字段值都可以是变量想要实现的功能遇到的问题 js代码想要实现的功能界面代码 // An highlighted block <view cla ...
微信小程序云数据库定时清空（云函数定时触发）
需求: 微信小程序云数据库某表仅保留当天数据,因此每天固定某时间清空一次实现: 1.新建云函数timer 2.在timer/config.json中配置定时器 {"triggers&quo ...
外部web端访问微信小程序云数据库的几种方法
前言我当前的项目是小程序开发,使用的是云开发方式,那么这时涉及到了小程序端提交的数据会保存到云数据库中,可是呢这些个数据要被外部访问用来管理,也就是还得弄一个管理后台界面管理这些数据.那就需要拿到云 ...
微信小程序云数据库中实现分页
微信小程序提供skip来实现分页比如数据库中有数据100条 db.collection('story').skip(0).limit(10).get() 而skip就是第skip+1条,比如skip ...
微信小程序云数据库触底分页加载，下拉无限加载，第一次请求数据随机，随机获取数据库的数据
效果图小程序云开发分页加载代码  <view class="pageTitle">家 ...
web端获取微信小程序云数据库数据实现增删改查等操作
获取小程序数据库前言一.微信小程序Web SDK 1.微信官方示例 2.未登录模式注意事项二.完整流程演示 1.开启云数据库访问权限 2.编写云函数 3.web前端引入js 4.web页面js访 ...
微信小程序-云数据库开发
数据库增删查改数据库权限管理这相当于管理员权限,可以改到所有人可读. 查询get() 首先在微信小程序上方工具栏点击云开发-数据库-添加集合-增添记录其次,在app.js中写入以下代码 App( ...
微信小程序云数据库实现注册
微信小程序自带的云数据库的优势在于,不用搭建服务器和后端就可以直接调用数据库我们接下来使用云数据库实现注册功能,效果图如下云数据库结构如下: 这是用云数据库实现注册功能,实现代码如下,: regi ...
微信小程序云数据库使用(上)
数据库写入创建集合 1.js文件 2.wxml 文件 3.wxss 文件有了一个小想法,向云数据库写入文本小故事,之后在读取故事. 数据库读取:https://blog.csdn.net/we ...

微信小程序云数据库的分页提取，解决提取大量数据的耗时问题

解决提取大量数据耗时问题

微信小程序云数据库的分页提取，解决提取大量数据的耗时问题相关推荐

最新文章

热门文章