需求总是不断改变的,好吧,今天就把vue如何实现逐步加载更多和分布加载更多说下,默认你知道如何去请求数据的哈
2|1页面
使用slice来进行限制展现从0，a的数据
//判断a的值是否小于数组的长度，小于就显示点击加载更多 <div class="load-more mr-bottom" v-if="a<draw_user.length" @click='loadMore' >点击加载更多</div> <div class="load-more mr-bottom" v-else >没有更多了</div>
2|2data
在data中定义a的数值
data() {
return {
a:20
};
}
}
2|3methods
在methods定义loadMore方法
methods: {
loadMore:function(){
this.a+=20;
}
｝
｝
3|0分布请求
这个需要和后端进行配合,不过很简单,后端对数据进行下分页就可以了
3|1页面
3|2data
data() {
return {
page:1,
page_count:''
};
},
3|3methods
在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("系统开小差,请重试");
});
},
__EOF__
作 者：。思索
出 处：https://www.cnblogs.com/wangyang0210/p/10309348.html