分两种情况,第一种是一次请求所有数据并分批展示;第二种是分批次请求数据。
1、一次请求
1.1 页面
使用slice来进行限制展现从0,a的数据:
<div v-for="product in productLists.slice(0,pageSize)" :key="product.id" class="product -item">
//判断a的值是否小于数组的长度,小于就显示点击加载更多
<div class="load-more mr-bottom" v-if="a<productLists.length" @click='loadMore' >点击加载更多
</div>
<div class="load-more mr-bottom" v-else >没有更多了</div>
1.2 data
在data中定义pageSize的数值:
data() {
return {
pageSize: 20
};
}
2、 分多次请求
2.1 页面
<div class="load-more mr-bottom" v-if="page<page_count" @click='loadMore' >点击加载更多
</div>
<div class="load-more mr-bottom" v-else >没有更多了</div>
2.2 data
data() {
return {
page: 1,
page_count: ''
};
},
2.3 methods
在methods定义loadMore方法:
loadMore: function() {
this.page += 1;
this.getDrawPrize({
current_page:this.page //请求页数
})
.then(ret => {
console.log(ret.data.code_result)
this.code_result = this.code_result.concat(ret.data.code_result); //将请求回来的数据和
上一次进行组合
})
.catch(err => {
this.$toast.fail("系统开小差,请重试");
});
},
欢迎关注公众号Java技术大本营,会不定期分享BAT面试资料等福利。