vue-infinite-scroll下拉加载

列表下拉加载组件，npm下载vue-infinite-scroll插件引入，直接按需引入element的InfiniteScroll不起作用

1.mainjs引入vue-infinite-scroll组件

import vueiInfinite from 'vue-infinite-scroll';
Vue.use(vueiInfinite);

2. html，scroll-wrap盒子设置高度、滚动（height：xxxpx，overflow：auto）

 <div class="list">   
   <div class="scroll-wrap" v-infinite-scroll="getLoadData" infinite-scroll-    
    disabled="stop"   infinite-scroll-immediate="false" infinite-scroll-distance='1'>
     <div v-for="(item,index) in list" :class="[index===activeKey?'active':'','item']"
       :key="index" @click="handleClick(item,index)">
          {{item.name}}
      </div>
      <p class="explain" v-if="loading">加载中...</p>
      <p class="explain" v-if="noMore&&list.length">没有更多了</p>
      <p class="empty" v-if="!list.length&&noMore&&!loading">暂无数据</p>
    </div>
</div>

 3.data数据据设置

 data() {
    return {
      list: [],
      loading: false,   //数据请求中，暂时停止请求
      pageNum: 1,
      pageSize: 5,
      noMore: false,   //没有更多数据
   }
}
 computed: {
    stop() {     //暂停请求
      return this.loading || this.noMore;
    },
 },

 

4. 请求

getLoadData() {
      this.loading=true
      const params = {
        ...this.requestParams,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      getVideo(params).then(res => {
          const data = res?.data
          const content =data?.dataList || [];
          if (data?.totalPage <= this.pageSize) {
            this.noMore = true;
            return
          } else {
            this.pageNum++;
            this.noMore = false;
          }
          if (content.length > 0) {
            this.list = [...this.list, ...this.handleDateFormat(content)]; 
          }
      })
      .catch(()=>{
          this.noMore=true
      })
      .finally(() => {
         this.loading = false;
      });
},