如何實現Vue底部按鈕點擊加載更多

1. 一次請求

1.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>

1.2 data

在data中定義a的數值：

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

1.3 methods

在methods定義loadMore方法：

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

2. 分布請求

2.1 頁面

<div class="load-more mr-bottom" v-if="page<page_count"  @click='loadMore' >點擊加載更多
</div>
<div class="load-more mr-bottom" v-else >沒有更多了</div>

2.2 data

data() {
       return {
            page: 1,
            page_count: ''
       };
},

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