评论

极简代码之云开发的触底无限加载

触底无限加载的简单的代码。

js:

const db = wx.cloud.database()
const _ = db.command
const col = "test"
const sql = {
  _id: _.neq(1)
} //获取所有记录

Page({

  data: {
    isEndOfList: false,
    list: [],
    limit: 20 //每次拉取数量
  },

  onLoad: function(options) {
    this.getData()
  },

  getData: function() {
    db.collection(col)
      .where(sql)
      .skip(this.data.list.length)
      .limit(this.data.limit)
      .get()
      .then(res => {
        this.setData({
          list: [...this.data.list, ...res.data], //合并数据
          isEndOfList: res.data.length < this.data.limit ? true : false //判断是否结束
        })
      })
  },

  onReachBottom: function() {
    this.data.isEndOfList || this.getData()
  }
})

wxml

<view style="height:100px" wx:for='{{list}}' wx:key='none'>{{index}}</view>
<view style="padding:15px;text-align:center;color:grey" wx:if='{{list.length>limit}}'>
  <view wx:if='{{(!isEndOfList)}}'>正在加载数据...</view>
  <view wx:else>----END----</view>
</view>
最后一次编辑于  2020-06-16  
点赞 15
收藏
评论

10 个评论

  • 李军
    李军
    2019-07-29

    骚的优雅~

    2019-07-29
    赞同 1
    回复
  • wang li
    wang li
    2019-06-25

    感谢分享

    2019-06-25
    赞同 1
    回复
  • 天空蓝没有情调
    天空蓝没有情调
    2019-06-25

    感谢分享

    2019-06-25
    赞同 1
    回复
  • 一滴水💧
    一滴水💧
    2020-07-20

    我想问一下 在云函数里面如何写getData 进行翻页呢?

    2020-07-20
    赞同
    回复 4
    • 老张
      老张
      2020-07-20
      伪命题。不应该去用云函数来getData.
      2020-07-20
      回复
    • 一滴水💧
      一滴水💧
      2020-07-20回复老张
      不云函数不能联表查询呀
      2020-07-20
      回复
    • 老张
      老张
      2020-07-20回复一滴水💧
      好吧,确实是。但是,有什么难度吗?写个getData的云函数呗。
      2020-07-20
      回复
    • 一滴水💧
      一滴水💧
      2020-07-20回复老张
      哈哈 我刚学没多久,要翻页 ,不过已经解决啦!
      2020-07-20
      回复
  • Kahen
    Kahen
    2020-06-07

    我研究一天一夜看到这代码,现在不断在骚啊,又优雅,偶买噶偶买噶赞叹的循环之中

    2020-06-07
    赞同
    回复 1
    • 老张
      老张
      2020-06-07
      嗯,自我感觉也比较得瑟。
      2020-06-07
      回复
  • 郑旭东
    郑旭东
    2020-03-13

    二维数组加载?厉害了。这个方案可以规避setData的1M数据限制吗?

    2020-03-13
    赞同
    回复
  • 英忠通信
    英忠通信
    2019-12-08

    代码很精炼啊。加个db的初始化:var db = wx.cloud.database()

    2019-12-08
    赞同
    回复
  • u
    u
    2019-11-28

    大佬,你这个代码有没有可能会触发多次请求,我没试过代码。

    2019-11-28
    赞同
    回复
  • 科
    2019-07-19

    sao

    2019-07-19
    赞同
    回复
  • 有孔的白毛衣
    有孔的白毛衣
    2019-07-18

    https://developers.weixin.qq.com/community/develop/doc/000cca349c400084c5e77058c5b404

    2019-07-18
    赞同
    回复
登录 后发表内容