uniapp 分页分页分页,真麻烦,用uview组件u-loadmore,但是只有样式,方法害得自己写
data声明:script:首先第一次请求图书列表然后上拉需要在onReachBottom()生命周期中:然后上拉请求:成了
·
<u-loadmore :status="status" class="load" />
data声明:
// 加载更多
status: 'loadmore',
list: [],
page: 1, //第几页
suo: true,
script:
首先第一次请求列表
// 第一次请求全部通知列表
requestnotice() {
uni.request({
url: '****', //仅为示例,并非真实接口地址。
method:"GET",
data: {
page: 1,
limit: 10
},
success: (res) => {
console.log("初始请求通知列表", res.data);
this.list = res.data.data
//在这里要进行一个判断,当后端传给我的数据小于每页的数据时就显示没有更多了
if (res.data.data.length == '') {
this.status = 'nomore';
this.suo = false
} else if (res.data.data.length < 10) {
this.status = 'nomore';
this.suo = false
}else if(res.data.data.length = 10){
this.status = 'loadmore';
this.suo = true
}
}
});
},
然后上拉需要在onReachBottom()生命周期中:
onReachBottom() {
if (this.suo) { //定义个小锁,当没有数据时锁住suo
this.status = 'loading';
this.page = ++this.page;
setTimeout(() => {
this.loadnotice()
}, 1000)
}
},
然后上拉请求:
loadnotice() {
uni.request({
url: '***', //仅为示例,并非真实接口地址。
method:"GET",
data: {
page: this.page,
limit: 10
},
success: (res) => {
console.log("上拉请求通知列表", res.data);
this.list = this.list.concat(res.data.data)
//在这里要进行一个判断,当后端传给我的数据小于每页的数据时就显示没有更多了
if (res.data.data.length == '') {
this.status = 'nomore';
this.suo = false
} else if (res.data.data.length < 10) {
this.status = 'nomore';
this.suo = false
}else if(res.data.data.length = 10){
this.status = 'loadmore';
this.suo = true
}
}
});
},
成了
更多推荐
已为社区贡献10条内容
所有评论(0)