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("系统开小差,请重试");

                });

        },