小程序 scroll-view上滑加载
2020-06-29 本文已影响0人
FSYu
wxml
<scroll-view scroll-y="true" enable-flex="true" bindscrolltolower="getBottom" lower-threshold="200" style="max-height: 100vh"></scroll-view>
js
// data 数据
data: {
list:[], // 列表数据
page: 1, // 页数
isLastPage: false, // 是否是最后一页
isLoadInterface: false, // 是否触发上滑加载,为false触发
pageSize: 10 // 每页数据个数
}
// 触底事件
getBottom: function () {
console.log("到底了")
if (!this.data.isLoadInterface && !this.data.isLastPage) { // isLoadInterface,isLastPage都为false触发
this.setData({
isLoadInterface: true,
page: this.data.page + 1
})
this.getList(); // 获取数据
}
}
// 获取分页数据
getList: function () {
this.setData({
isLastPage: false
})
var _self = this;
wx.request({
url: 'test.php', //仅为示例,并非真实的接口地址
data: {
page: _self .data.page,
pageSize: _self .data.pageSize,
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
_self .setData({
isLoadInterface: false
})
if(this.data.list.length == 0 || !this.data.list) { // 列表没数据
this.setData({
list: res.data.data,
isLastPage: res.data.data.length >= this.data.pageSize? false: true
})
}else { // 列表有数据用 concat 拼接
this.setData({
list: res.data.data.length > 0? this.data.list.concat(res.data.data):this.data.list,
isLastPage: res.data.data.length >= this.data.pageSize? false: true
})
}
})
}