InfiniteScroll 无限滚动组件的使用

项目场景：

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

---

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

1.load被无限加载

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

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

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

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

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++;//主要代码
)
}

---