【37】小程序滑动到底部加载更多数据

根据官方文档的介绍，小程序开发，从默认环境的数据库里面取数据，使用小程序端，默认最多取20条数据，云函数端最多取100条数据，那么我们在浏览数据的时候，就需要分页加载数据。

滑动底部加载数据

分页取数据的方式有很多种，这里就介绍滑动加载这种比较常用的方式，使用的组件scroll-view和skip实现。

scroll-view 的使用

//页面
<scroll-view scroll-y="true" style="height: 1100rpx;" bindscrolltolower="getSitesData">
//数据内容
</scroll-view>

skip 的使用

//分页获取数据
data: {
    sites:{},
    selflabel:"",
    pages:1,//页数
    limit:20 //每次取条目数
},
getSitesData:function(){
    var pages=this.data.pages
    var limit=this.data.limit
    var loadeddata=this.data.sites //保存之前的数据
    var sitearr = new Array()
    //获取数据库引用
    const db = wx.cloud.database({
      env: "数据库"
    })
    db.collection('表').where({
      isshow: "Y"
    }).skip(pages*limit).orderBy("sitedate", "desc").get().then(res => {
      // res.data 包含该记录的数据
      for (var i = 0; i < res.data.length; i++) {
        sitearr[i] = (res.data[i])
        sitearr[i].sitedate = (res.data[i].sitedate.getFullYear()) + "-" + (res.data[i].sitedate.getMonth() + 1) + "-" + (res.data[i].sitedate.getDate())
      }
      this.setData({
        sites: loadeddata.concat(sitearr),//合并数据
        pages:pages+1//页数加1
      })
    })
  }

参考文档

组件scroll-view
https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

分页取数据
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/collection/Collection.get.html