v-infinite-scroll无限滚动遇到的坑

 <ul
 class="pagelist"
  v-infinite-scroll="loadMore"
  infinite-scroll-disabled="loading"
  infinite-scroll-distance="10" >
  <li v-for="item in list">{{ item }}</li>
</ul>
export defalut({
    data() {
        return {
            loading:false,
            list:[]
        }
    },
    methods: {
        loadMore() {
          this.loading = true
        }
    }
})
填坑
1.重复加载。初次进入列表页，会加载两次或者多次数据
造成重复加载的原因，罪魁祸首是 infinite-scroll-disabled，在 loadMore 方法里 有一句 this.loading = true，把  infinite-scroll-disabled 的值设置为了true
它的作用就是，当你进入页面是，会检查如果第一次请求的数据没有撑满你的容器（list-data），就会立即再次执行 v-infinite-scroll 绑定的方法（loadMore），第二次没有撑满，会执行第三次
2.滚动时，不起作用
这种情况，就是在 loadMore 方法里没有写 this.loading = true，同时，第一次加载的数据也没有撑满容器。而我们的样式设置：
.pagelist{
    height: 100%;
    overflow-y: auto;
}
根本原因是因为，数据没有撑满容器就不会有滚动效果，所以就不会起作用了。
所以解决方案 就是要出现滚动条 ！！！ 容器高设置的小一点，每页的数据设置为20或者更多。