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

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

首先先建立一个较大的数据库，最好数据量超过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;
}

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