問題一：下拉不會觸發loadMore事件

因為我的介面沒有分頁所以用slice模擬資料分頁載入

CSS程式碼：

.newsList {
        max-height: 35rem;
        overflow-y: auto;
 ｝

HTML程式碼：

 <ul
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="isMoreLoading"
    infinite-scroll-distance="10"
    :infinite-scroll-immediate-check="true"
    class="newsList">
    <li v-for="(item,index) in newsList">{{item}}</li>
 </ul>
 <div class="loading-box tc" v-if="isLoading">
    <mt-spinner type="snake" class="loading-more"></mt-spinner>
    <span class="loading-more-txt">載入中...</span>
 </div>
 <div class="no-more" v-if="noMore">沒有更多了~</div>
 

JS程式碼：

data() {
    return {
      newsList : [],
      moreList : [],
      i : 0,
      isMoreLoading: false, // 載入更多中
      isLoading : false,
      noMore : false
    }
  }

開始的時候載入前五條資料

created() {
    var _vm = this; 
    let i = 0;
    _vm.axios.post().then(function(response) {
      console.log(response.data);
      _vm.newsList = response.data.slice(i * 5 , (i + 1) * 5);
    }).catch(function(error) {
      console.info(error)
    });
  }
 

後面每次下拉觸發loadMore事件，並再次載入五條資料，直到所有資料載入完畢

loadMore() {
      this.isMoreLoading = true;
      this.isLoading = true;
      this.noMore = false;
      setTimeout(() => {
        var _vm = this;
        _vm.axios.post().then(function(response) {
          console.log(response.data);
          _vm.i ++;
          _vm.moreList = response.data.slice(_vm.i * 5 , (_vm.i + 1) * 5);
          if(_vm.moreList.length == 0){
            _vm.noMore = true;
            _vm.isLoading = false;
          }else{
            _vm.isLoading = false;
            _vm.moreList.forEach(function(item){
              _vm.newsList.push(item);
            })
          }
        }).catch(function(error) {
          console.info(error)
        });
        this.noMore = false;
        this.isMoreLoading = false;
      }, 1000);
    }
 

問題二：頁面沒有任何操作，不斷髮送請求進行載入