InfiniteScroll 无限滚动组件的使用

项目场景：

在无限加载数据时，又不想把所有的数据加载完成，借助分页的思想将数据加载出来

---

问题描述及解决方案，案例

1.load被无限加载

原因：和html的标签样式有关，如果初始时加载的数据高度没有填充满完当前的html元素的最小高度，load方法就会一直执行

解决方案：调整元素的高度,比如初始时只想加载两条数据，两条数据的占元素高度为50px，则初始时的高度要小于等于50px

2.数据快加载完成时，load方法不调用了，导致后面的数据不显示，我是使用该组件的一个属性   infinite-scroll-distance设置为10，也可以设置成其他值

3简单的案例使用：基于vue的，使用之前需要引入这个插件，或者把element-ui全局引入到vue的main.js

<template>
  <div>
  <div class="myDeviceWrap">
      <!-- 有数据 -->
      <div
        class="scrollview"
        style="overflow: auto"
      >
      <div
         class="deviceTable"
          v-infinite-scroll="load"
          infinite-scroll-throttle-delay="500"
          infinite-scroll-disabled="disabled"
          immediate-check="false"
          infinite-scroll-distance="10"
        >
          <div class="liDemo" v-for="item in count" :key="item">
              <div style="margin:10px;background:blue;height:33vh">
              {{item}}
              </div> 
          </div>
        </div>
        <p v-if="loading">加载中...</p>
        <p v-if="noMore">没有更多了</p>
      </div>
      <!-- 无数据 -->
    </div>
  </div>
  
</template>

<script>
  export default {
    data () {
      return {
        count: 0,
        loading: false
      }
    },
    computed: {
      noMore () {
        return this.count >= 20
      },
      disabled () {
        return this.loading || this.noMore
      }
    },
    methods: {
      load () {
        // console.log('131321');
        // this.loading = true
        // this.count += 2
        this.loading = true
        setTimeout(() => {
          this.count += 2
          this.loading = false
        }, 2000)
      }
    }
  }
</script>
   
<style lang="scss"  scoped>
.myDeviceWrap{
   width: 100%;
  height: 76.4vh;
}
.scrollview{
 width: 100%;
  height: 76.4vh;
}
.deviceTable {
  width: 100%;
  display: flex;
  font-size: 16px;
  flex-wrap: wrap;
}
.liDemo{
  padding: 20px;
 width: calc(100% / 2);
}
 
   
</style>  

4.与后端进行交互，实现分页实现无限加载功能部分js代码

 load() {
       //loading是控制正在加载中...显示
      this.loading = true;
      setTimeout(() => {
        if (this.currentPage <= this.pages) {//this.currentPage表示当前页数,初始值为1， 
                                             // this.pages后端返回的总页数
          this.fetchData();//调用后端接口的方法
        } else {
        }
      }, 1000);
    },

//

fetchData(){
    axios.get(url).then(res=>{
      this.total = res.result.total;
        this.pages = res.result.pages;
        this.tableData = this.tableData.concat(res.result.list);//主要代码
        this.loading = false;
        this.currentPage++;//主要代码
)
}

---