Quasar无限滚动不断获取数据

Question

我正在尝试使用类星体实现无限滚动。这是我的代码：

<template>
  <q-page padding>
    <q-tab-panels>
    <!-- Some tag about panels -->
      <q-tab-panel name="...">
        <q-infinite-scroll
          @load="fetchMoreData"
          :disable="!hasMoreData"
          :offset="10"
          :debounce="1500"
        >
          <MyCard
            v-for="(data, index) in datas"
            :weeklyEvaluation="datas"
            :key="index"
          />
          <template v-slot:loading>
            <div class="row justify-center q-my-md">
              <q-spinner-dots color="primary" size="40px" />
            </div>
          </template>
        </q-infinite-scroll>
      </q-tab-panel>
    </q-tab-panels>
  <q-page padding>
</template>
<script setup>
// import ...
const datas = ref([
  // ...
])

async function fetchMoreData() {
  const newDatas = await fetch();
  datas.value = [
    ...datas.value,
    newDatas
  ]
}
</script>

我期望的是，只有当我向下滚动数据列表时才会调用

fetchMoreData

函数。然而，与我的预期相反，

fetchMoreData

函数每2秒调用一次，并且仅在加载数据库中的所有数据时才停止。如果你们看到我遇到的问题或需要更多信息，请尽快回复我。

Answer 1

为了使偏移正确工作，需要将其包装在 div 中并设置该 div 的高度和溢出：auto

<div ref="scrollTargetRef" style="height: 400px; overflow: auto;">
<q-infinite-scroll
          :scroll-target="$refs.scrollTargetRef" 
          @load="fetchMoreData"
          :disable="!hasMoreData"
          :offset="200"
        >
          <MyCard
            v-for="(data, index) in datas"
            :weeklyEvaluation="datas"
            :key="index"
          />
          <template v-slot:loading>
            <div class="row justify-center q-my-md">
              <q-spinner-dots color="primary" size="40px" />
            </div>
          </template>
        </q-infinite-scroll>
</div>

尝试这样的事情。