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("系統開小差,請重試");
                });
        },