一、数据分页思路
- 先声明一个属性是否有更多数据,
hasMore = true
- 在触底后根据
hasMore
的状态来判断,为真继续加上skip += limit
然后发送请求。。 - 在请求中判断剩余数据的长度是否为0,
res.res.vertical.length === 0
为真 改变hasMore
的状态为false
,并且返回不在执行下面的代码 - 还有如果有固定数据,需要判断本地
this.recommend.length === 0
某个数据的长度是否为0,为0 才发送第一次请求,后面请求后改变了数据的长度就不用在执行这段重复代码了
代码展示: 以vue 为实例
<scroll-view @scrolltolower="lower" scroll-y="true" style="height: 1000px" class="recommend-view" v-if="recommend.length>0">
</scroll-view>
//推荐列表
recommend: [],
//月份模块
monthes: {},
hots: [],
params: {
limit: 30,
order: "hot",
skip: 0
},
hasMore: true
mounted() {
this.getList();
},
methods: {
//滚动条触底条件
lower() {
//根据状态判断是否继续发送请求
if (this.hasMore) {
this.params.skip += this.params.limit;
this.getList();
} else {
uni.showToast({
title: "没有更多图片了",
icon: "none"
});
}
},
getList() {
this.request({
url: "http://service.picasso.adesk.com/v3/homepage/vertical",
data: this.params
})
.then(res => {
//优化判断是否还有数据,没有数据就改变状态
if (res.res.vertical.length === 0) {
this.hasMore = false;
return; //返回不再继续执行
}
if (this.recommend.length === 0) {
//推荐数据
this.recommend = res.res.homepage[1].items;
//月份数据
this.monthes = res.res.homepage[2];
this.monthes.MM = moment(this.monthes.stime).format("MM");
this.monthes.DD = moment(this.monthes.stime).format("DD");
}
//热门数据,加上继续请求得到的res.res.vertical,并展开合并为全部数据
this.hots = [...this.hots, ...res.res.vertical];
});
}
}