Quasar无限滚动组件持续触发数据请求问题求助

核心问题分析 #

你的fetchMoreData持续自动触发，本质是q-infinite-scroll的加载触发区域始终处于视口可见范围内，或者状态维护不当导致组件认为还需要加载更多数据。以下是具体排查和修复步骤：

1. 确保滚动容器有明确的高度和滚动属性 #

q-infinite-scroll需要父级容器具备可滚动的条件，否则当内容高度不足时，加载触发点会一直处于可见状态，持续触发load事件。给q-tab-panel添加滚动样式：

<q-tab-panel name="..." style="height: calc(100vh - 100px); overflow-y: auto;">
  <!-- q-infinite-scroll 放在这里 -->
</q-tab-panel>

注：calc(100vh - 100px)可根据你的页面布局调整，确保容器有固定高度且内容超出时可滚动。

2. 正确维护hasMoreData状态 #

你当前代码未定义和更新hasMoreData，默认可能为true且不会切换为false，导致组件一直尝试加载数据。补充状态管理：

const datas = ref([])
const hasMoreData = ref(true) // 初始化可加载状态

async function fetchMoreData() {
  // 加载时临时禁用防止重复触发（可选）
  hasMoreData.value = false
  try {
    const newDatas = await fetch() // 假设返回的是数组
    if (newDatas.length === 0) {
      hasMoreData.value = false // 没有更多数据时禁用加载
      return
    }
    // 合并新数据时展开数组，避免嵌套
    datas.value = [...datas.value, ...newDatas]
    hasMoreData.value = true // 恢复可加载状态
  } catch (err) {
    console.error(err)
    hasMoreData.value = true // 出错后恢复，允许重试
  }
}

3. 修复数据合并的错误 #

原代码datas.value = [...datas.value, newDatas]会将newDatas作为单个元素插入数组，导致数组嵌套，列表高度无法正确增长，进而持续触发加载。必须展开newDatas：

// 错误写法
datas.value = [...datas.value, newDatas]
// 正确写法（newDatas是数组时）
datas.value = [...datas.value, ...newDatas]

4. 优化v-for的key值与数据绑定 #

使用index作为v-for的key可能导致组件复用异常，同时原代码错误地将整个datas数组传递给weeklyEvaluation，应该传递单个数据项：

<MyCard
  v-for="data in datas"
  :weeklyEvaluation="data"
  :key="data.id" <!-- 用数据的唯一ID替代index -->
/>

内容的提问来源于stack exchange，提问作者Nguyen Quoc Bao