element ui无限滚动 InfiniteScroll 触底分页效果 使用及踩坑

因为要做下拉触底效果，刚好看到element ui有这个无限滚动插件，就打算用一下，以前写的那个效果不好。

---

踩坑：

1.刚开始不知道需要安装，所以就直接使用导致报错

Failed to resolve directive: infinite-scroll

2.在直接使用的时候，滑动一直不生效。后来换到别的页面是生效的，反复排查发现在顶级div我用到了v-if，v-if初始值是false，在调用了接口之后才是true，这种情况下滚动不生效

3.可能是由于我页面布局的原因，导致我在使用infinite-scroll-disabled禁用这个属性时候一直不生效，反复多次调用接口，所以换了别的方法解决了，解决方法是加一个busyScroll的字段，通过这个字段在loadMore方法里去主动加以限制是否能够继续触发调用接口

---

用法步骤：

1.安装：

 npm install vue-infinite-scroll --save

2.引用：

• 全局引用：
  在main.js中添加以下代码：

import infiniteScroll from "vue-infinite-scroll";
 Vue.use(infiniteScroll);

• 单个组件中引用

import infiniteScroll from 'vue-infinite-scroll'
export default {
	directives: { infiniteScroll }
}

3.代码中使用：

<el-tab-pane  v-infinite-scroll="loadMore" :infinite-scroll-distance="10>
  <div class="ocr_text" v-for="(item,index) in ocrList" :key="index">
     ...
   </div>
   <p v-if="loadingOcr" style="text-align:center;">加载中...</p>
   <p v-if="noMoreOcr" style="text-align:center;">没有更多了</p>
   <div class="no_data" v-if="!ocrList.length && !loadingOcr">
     暂无相关文本~
   </div>
 </el-tab-pane>

loadMore(){
  this.loadingOcr = true
  if(!this.busyScroll){
    this.noMoreOcr = false
    setTimeout(() => {
        this.PageNum += 1
        this.getOcrText()
      }, 2000)
  }else{
    this.noMoreOcr = true
    this.loadingOcr = false
  }
}

getOcrText() {
     this.$http({
       url: "...",
       method: "GET",
       params: {
         ip_id: this.ipId,
         ip_type: this.paramsType,
         page: this.PageNum,
         page_num: this.PageSize,
         search_name: this.ocrSearch.trim()
       },
     }).then((res) => {
       this.PageTotal = res.data.total_num
       this.loadingOcr = false

       this.ocrList = this.ocrList.concat(res.data.ocr_list);
       if(res.data.ocr_list.length == 0){
       	 this.noMoreOcr  = true
         this.busyScroll = true
       }else {
           this.busyScroll = false
       }
     }).catch(error => console.log(error));
   },

data内容：

loadingOcr: false,
noMoreOcr: false,
busyScroll: false,

PageSize: 50, //每页显示
PageNum: 0, //当前页
PageTotal: 0, //总条数