Vue——轻松实现vue底部点击加载更多

 

需求老是不断改变的,好吧,今天就把vue如何实现逐步加载更多和分布加载更多说下,默认你知道如何去请求数据的哈

2|0一次请求

2|1页面

使用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>

2|2data

在data中定义a的数值

data() { return { a:20 };
}

2|3methods

在methods定义loadMore方法

methods: { loadMore:function(){ this.a+=20; }
｝

3|0分布请求

这个须要和后端进行配合,不过很简单,后端对数据进行下分页就能够了

3|1页面

<div class="load-more mr-bottom" v-if="page<page_count" @click='loadMore' >点击加载更多</div> <div class="load-more mr-bottom" v-else >没有更多了</div>

 

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__

做　　者：。思索
出　　处：http://www.javashuo.com/article/p-nymserpt-dg.html