Vue——轻松实现vue底部点击加载更多
前言
需求总是不断改变的, 好吧, 今天就把 vue 如何实现逐步加载更多和分布加载更多说下, 默认你知道如何去请求数据的哈
一次请求
页面
使用 slice 来进行限制展现从 0，a 的数据
<div v-for="user in draw_user.slice(0,a)" :key="user.uid" class="user-item">
// 判断 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>
data
在 data 中定义 a 的数值
data() {
return {a:20};
}
methods
在 methods 定义 loadMore 方法
methods: {loadMore:function(){this.a+=20;}
｝
分布请求
这个需要和后端进行配合, 不过很简单, 后端对数据进行下分页就可以了
页面
<div class="load-more mr-bottom" v-if="page<page_count" @click='loadMore' >点击加载更多</div> <div class="load-more mr-bottom" v-else >没有更多了</div>
data
data() { return { page:1, page_count:'' }; },
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("系统开小差, 请重试");}); },
__EOF__