html:
<scroll-view class='dataContainer' scroll-y="{{true}}" bindscrolltolower="nextDataPage">
<block wx:for="{{tuijlpList}}" wx:key="index">
<view >数据:{{item.data}}</view>
</block>
<view class="morelp">
{{ nomore ? "没有更多了" : "正在加载..." }}
</view>
<view class='bottomline' wx:if="{{tuijlpList.length == 0}}" >暂时没有数据</view>
</scroll-view>
js:
data: {
area_id: "",
nomore: 0,
tuijlpList: [],
isLoadInterface: false,
pagecount: 1,
page: 1,
},
//查询数据列表
mgetLoupanList: function () {
let parmas = {
area_id: this.data.area_id,
page: this.data.page
}
getLoupanList(parmas).then((res) => {
// console.log(parmas);
// console.log(res);
this.setData({
pagecount: Math.ceil(res.data.count / 10)
})
if (this.data.page == 1) {
this.setData({
tuijlpList: res.data.data,
isLoadInterface: false
})
} else {
this.setData({
tuijlpList: [...this.data.tuijlpList, ...res.data.data],
isLoadInterface: false
})
}
// console.log(res);
// console.log(this.data.page);
// console.log(this.data.pagecount);
})
},
// 加载下一页数据
nextDataPage: function () {
if (!this.data.isLoadInterface) {//防止在接口未执行完再次调用接口
if (this.data.page * 1 + 1 <= this.data.pagecount) {
this.setData({
isLoadInterface: true,
page: this.data.page * 1 + 1
})
this.mgetLoupanList();
} else {
//如果大于总页数停止请求数据
this.setData({
nomore: 1
})
console.log("没有更多了");
}
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.mgetLoupanList();
}
思路:以小程序标签scroll-view作为列表容器,容器方法bindscrolltolower来触发下一页加载
页面onload后执行第一页,非第一页的数据用concat方法拼接之前的数据
防止接口未执行完反复触发bindscrolltolower里的方法,用一个变量isLoadInterface来截断
接口的数据中应有islast这类是否最后一页的参数,用来判断是否加载全部数据
借鉴文章:
微信小程序之下拉触底时加载下一页:https://wwwblogs/nanyang520/p/11199719.html
更多推荐
微信小程序之下拉触底时加载下一页 下拉加载更多
发布评论