评论

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

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

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

"height:100px" wx:for='{{list}}' wx:key='none'>{{index}}</view>

  正在加载数据...view>
  <view wx:else>----END----view>
</view>
最后一次编辑于  06-16  
点赞 13
收藏
评论

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
    回复
  • 一滴水💧
    一滴水💧
    07-20

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

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

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

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

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

    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
    赞同
    回复
  • Dexter Gong
    Dexter Gong
    2019-07-18

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

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