elementui InfiniteScroll 无限滚动，在移动端会出现的问题

 我们在做pc时，一般的数据都会使用表格进行数据的分页处理，但是当到移动端时，我们对数据的处理一般都会使用列表的显示方式。这样的开发模式我们就会使用到elementui InfiniteScroll 无限滚动。

根据文档这部分，写了我的代码，开始长下面这样子…结果发现了一个问题，就是进入页面之后像是  infinite-scroll-disabled和infinite-scroll-immediate没有生效似的，页面疯狂调用onLoad函数。

 elementui InfiniteScroll 无限滚动的具体的用法可以查看官方的开发文档：

组件 | Element

基础用法

在要实现滚动加载的列表上上添加v-infinite-scroll，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法。

案例代码：

<template>
  <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
    <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
  </ul>
</template>

<script>
  export default {
    data () {
      return {
        count: 0
      }
    },
    methods: {
      load () {
        this.count += 2
      }
    }
  }
</script>

看起来用起来很方便 ，但是在我在移动端使用时却出现了问题：

        在我开发时，将v-infinite-scroll 添加到了for 循环生成的盒子父级节点上，数据是有了，数据也进行分页拿到了全部数据，但是出现了一个大问题，就是在我刚进入页面之后，v-infinite-scroll所绑定方法就立即启动了，并且在我没有任何操作下，v-infinite-scroll一直在拉取数据，并没有向上滑动进行加载的效果。也就是会出现，一直请求的情况。

解决办法：

我在csdn上搜索了很多解决方案，比如：

1、包含的UI 需要设置固定的高度，或者与视图同高，height：100%。

2、未设置距离多少像素加载在ul标签中加入  infinite-scroll-distance="10"  //距离10px加载。

然而对我，仅仅对我来说，没啥用。

后来，我又查了一下v-infinite-scroll的底层逻辑，其实也没有多麻烦，这个组件呢主要是监听滚动条的动态，当滚动条触底，或者达到某个阈值时，就会触发所绑定的方法。上面的方法并没有错误，在使用这个组件时，容器一定要有高度。不然就会无线加载。

而我在做移动端开发时因为业务需求，并没有对下面的数据列表限制高度，而是任由它去把盒子撑大，。对了还有一点很重要，在哪个容器使用v-infinite-scroll组件，哪个容器的滚动条就会被监听。这点很重要。也就是说页面发送请求之后，所拿到的数据一直在撑大自身的盒子，自身的盒子又一直在撑大body的盒子，所以我们看到的滚动条其实是body的滚动条，而存放数据的盒子也的滚动条一直在触底触发方法。所以就会出现无限触发方法。

知道了问题所在，那我们需要做的无非就是添加v-infinite-scroll的位置，并且给需要使用该组件的盒子一个合适的高度。（如果高度不合适会出现双滚动条哦）。

像我的业务需求，在不影响样式的情况下使用无限滚动，就只能监听全局的滚动条了。