VueUse useInfiniteScroll无法触发加载更多问题求助

1. 确认滚动容器是否正确 #

useInfiniteScroll 默认监听目标DOM元素的自身滚动事件。如果你的.WorkList元素没有固定高度且未设置overflow-y: auto，页面实际滚动的是window而非该容器，导致滚动事件无法触发。

解决方法： #

• 给.WorkList添加固定高度和滚动样式：

.WorkList {
  height: calc(100vh - 你的Banner高度); /* 根据页面布局调整具体数值 */
  overflow-y: auto;
}

• 若滚动的是整个页面，直接将监听目标改为window：

// 在setup中修改useInfiniteScroll的目标参数
useInfiniteScroll(
  window,
  () => {
    sliceNumber.value += 3
    console.log(sliceNumber.value)
  }, {
    distance: 10
  }
)

2. 修正computed中ref的访问方式 #

在Options API的computed里，直接通过this.sliceNumber访问到的是ref对象而非其实际值，虽然初始加载可能因自动转换生效，但后续更新无法正确触发计算逻辑。

解决方法： #

选择以下任一方案：

• 方案1：改用Composition API风格的computed

import { computed } from 'vue'

setup() {
  // ...其他代码
  const works = computed(() => {
    return this.$store.state.works.slice(0, sliceNumber.value)
  })

  return { workDom, sliceNumber, works }
}

• 方案2：在Options API的computed中手动解包ref

computed: {
  works() {
    return this.$store.state.works.slice(0, this.sliceNumber.value)
  }
}

3. 添加内容边界判断 #

如果$store.state.works的总数量小于等于初始加载的3个，或者滚动后sliceNumber超过总数量，自然不会有新内容加载。可以在触发函数中添加边界判断：

() => {
  const totalWorks = this.$store.state.works.length
  if (sliceNumber.value < totalWorks) {
    sliceNumber.value += 3
    // 防止sliceNumber超过总数量
    sliceNumber.value = Math.min(sliceNumber.value, totalWorks)
    console.log(sliceNumber.value)
  }
}

4. 验证触发条件与元素挂载状态 #

• 调整distance参数（单位为像素），比如设为100，测试是否更容易触发加载逻辑。
• 添加元素挂载日志，确认workDom是否正确获取到DOM节点：

import { onMounted } from 'vue'

setup() {
  const workDom = ref(null)
  // ...其他代码
  onMounted(() => {
    console.log('workDom已挂载:', workDom.value)
  })
  // ...
}

内容的提问来源于stack exchange，提问作者Marcus Harting