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

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

滑动底部加载数据

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

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

展开阅读全文

页面更新:2024-03-22

标签:加载   程序   数据   条目   函数   页数   组件   常用   页面   文档   方式   环境   数据库   更多   官方   内容   游戏

1 2 3 4 5

上滑加载更多 ↓
推荐阅读:
友情链接:
更多:

本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828  

© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号

Top