Vue项目中v-else分支下infinite loading无限加载组件不生效问题

云原生阿岚

2026-10-6

问题排查及解决方法

1 先修正基础语法错误
你提供的代码里infiniteHandler方法中console.log('hello)缺少闭合单引号，修改为console.log('hello')，避免语法报错阻塞逻辑执行。
2 检查force-use-infinite-wrapper属性的使用条件
force-use-infinite-wrapper属性要求组件外层必须包裹官方提供的infinite-wrapper组件，用来指定滚动监听的容器。如果你的滚动容器是普通的overflow: auto自定义盒子，或者默认的window，不需要加这个属性，删掉该属性即可。
3 检查distance参数是否合理
你设置的:distance="800"代表距离滚动容器底部还有800px时才会触发加载事件，如果当前页面内容高度小于滚动容器可视高度，或者滚动位置距离底部不足800px，事件就不会触发。可以先把值改小比如改成100测试是否能正常触发。
4 手动触发首次加载
条件渲染切换出infinite-loading组件时，部分版本的组件不会自动触发首次加载，你可以给组件加ref，切换viewMore之后主动触发重置：

<generic-button v-if="!viewMore" inline no-arrow @click="toggleViewMore"
  >{{ $t('components.slots.product-list.see-more-favoris') }}
  <template #icon-right>
    <icon-base width="17" height="10">
      <icon-arrow-down color="#ffffff" />
    </icon-base>
  </template>
</generic-button>
<infinite-loading
  v-else
  ref="infiniteLoading"
  :distance="100"
  @infinite="infiniteHandler"
></infinite-loading>

<script>
export default {
  data() {
    return {
      viewMore: false,
    };
  },
  methods: {
    async toggleViewMore() {
      this.viewMore = true
      await this.$nextTick()
      this.$refs.infiniteLoading.reset()
    },
    infiniteHandler($state) {
      console.log('hello')
      // 加载完成后要调用 $state.loaded() ，如果没有更多数据调用 $state.complete()
    }
  }
}
</script>