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）

 
   
   

     

          {{item.name}}
      
      
加载中...
      
没有更多了
      
暂无数据
    

 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;
      });
},