微信小程序雲數據庫觸底分頁加載，極簡代碼之雲開發的觸底無限加載

觸底無限加載的簡單的代碼。

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>