小狼人Lv92
微信小程序上拉加载更多
wxml
<scroll-view style="height: 100%;" scroll-y bindscroll="scroll" bindscrolltolower="reactBottom" scroll-with-animation> 需要渲染的内容 </scroll-view>js
data //加载更多
isLastPage: false, tips: '点击加载更多', page:1,//当前页数 limit:18, //每页显示数量
请求getList() {
// 发起请求 wx.showLoading({ title: '加载中', }) let that = this; wx.request({ url: "", success: (res) => { if (res.statusCode!= 200 || res.data.Code != 200) { that.showError() } else { wx.hideLoading() var newData = {} if (res.data.Data.length < that.data.limit) { // 没有数据了,已经是最后一页 newData.isLastPage = true; newData.tips = "没有更多了"; } // 追加数据 newData.navList = this.data.navList.concat(res.data.Data) this.setData(newData) } }, fail: () => { that.showError() }, }) },
showError: function () { wx.showToast({ title: "网络异常", icon: 'loading' }) },
reactBottom () { console.log('触底-加载更多'); if (this.data.isLastPage) { return } this.setData({ page: this.data.page + 1 , }) this.getList();//请求 },
2 已被阅读了1618次 楼主 2020-09-19 14:22:44