vue element-ui InfiniteScroll v-infinite-scroll 无限滚动 仅触发1次或几次 无效 可行 解决方案

问题

参考官网 Demo https://element.eleme.io/#/zh-CN/component/infiniteScroll
使用 element-ui
InfiniteScroll 无限滚动 v-infinite-scroll 组件后，仅触发1次或几次 无效

环境

Vue @2.6.14
element-ui @2.15.6

正文&解决方案

将infinite-scroll-distance设为 1 ，或其他合适的 >0 的数值

infinite-scroll-distance="1"

infinite-scroll-distance: 触发加载的距离阈值，单位为px
注*：此法为 临时 有效解决方案

详细

<template>
  <div>
    <ul class="infinite-list"
        v-infinite-scroll="load"
        infinite-scroll-disabled="false"
        infinite-scroll-immediate="true"
        infinite-scroll-distance="1"
        style="overflow:auto">
      <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
    </ul>
  </div>
</template>

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

<style scoped>
.infinite-list {
  height: 300px;
}
</style>

相应参考

官网： https://element.eleme.io/#/zh-CN/component/infiniteScroll

属性

参数	说明	类型	可选值	默认值
infinite-scroll-disabled	是否禁用	boolean	-	false
infinite-scroll-delay	节流时延，单位为ms	number	-	200
infinite-scroll-distance	触发加载的距离阈值，单位为px	number	-	0
infinite-scroll-immediate	是否立即执行加载方法，以防初始状态下内容无法撑满容器。	boolean	-	true

更新记录

2021.11.04 初始

• 未研究根本原因
• 临时 有效解决方案

2022.10.10 格式调整