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

Posted 2021-02-05 wangyang0210

前言

这里接口直接请求了所有的数据，所以用的就不是分布请求的方法，而是逐步展现的方法

步骤

使用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中定义a的数值

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

methods定义方法

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