极简代码之云开发的触底无限加载
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>
[代码]