InfiniteScroll 无限滚动失效

简介

记录一次 vue2 InfiniteScroll 无限滚动属性失效的问题，如下：

<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>

是 ElementUI 提供的组件（element.eleme.cn/#/zh-CN/com…）。改造到自己项目中，连续往下滚动触发了两次绑定的事件后就怎么也触发不了。

解决

增加一个这个属性，infinite-scroll-distance="10" 表示向下滚动至距离容器顶部 10px 时触发绑定的事件。

因为有时由于容器设置的高度和实际展示内容的高度有稍微出入（稍显牵强，我也不懂），导致没能触发到绑定的事件。

默认值是 0，但前端页面布局条条框框，很难做到这么精准。