【发布时间】：2021-11-03 09:51:17
【问题描述】：
我正在开发 Nuxt 应用程序。对于我的一个动态页面，我想用 无限滚动 显示数据。为此，我决定使用Vue-infinite-loading。我阅读了this article 并浏览了 Vue-infinite-loading 的文档。在他们两个中，他们都使用 axios 模块逐步加载数据以在滚动到达该页面中的特定点时显示在页面中。但是在我的页面中，在$strapi module 和 Nuxt fetch 钩子的帮助下，数据已经根据 page-id 存在于页面中。我页面的整个代码如下：
<template>
<v-container fluid>
<v-row>
<v-col cols="10" class="mx-auto">
<p v-if="$fetchState.pending">
در حال بارگذاری اطلاعات
</p>
<p v-else-if="$fetchState.error">
مشکلی در نمایش اطلاعات به وجود آمده است.
</p>
<div v-else>
<h1 v-html="this.fourType[this.nameRoute]['title']">
</h1>
<section>
<BaseCard
v-for="item in listShow"
:key="item.id"
:imgId = "item.id"
:sizeCard = "270"
>
<template v-slot:tozih>
{{ item.tozih }}
</template>
<template v-slot:aout>
{{ item.author }}
</template>
</BaseCard>
</section>
<infinite-loading
spinner="spiral"
@infinite="infiniteScroll"
>
</infinite-loading>
</div>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
data() {
return {
listBooks: [],
fourType:{
short: {
title: "در این قسمت می‌توانید کتابها را به ترتیب از کوچک (کمترین تعداد صفحه) به بزرگ (بیشترین تعداد صفحه) مشاهده نمایید:",
request: 1
},
programming: {
title: "در این قسمت می‌توانید کتب مرتبط با برنامه‌نویسی (دارای برچسب برنامه‌نویسی) را به ترتیب به روزرسانی (از جدیدترین به قدیمی‌ترین) مشاهده نمایید:",
request: 2
},
new: {
title: "در این قسمت می‌توانید کتب موجود در سایت را به ترتیب به روز رسانی (از جدید به قدیم) مشاهده نمایید:",
request: 3
},
random: {
title: "در این قسمت می‌توانید به صورت تصادفی به مشاهده تمامی کتب موجود در سایت بپردازید:",
request: 4
}
},
nameRoute: this.$route.params.type
}
}, // end of data
computed: {
listShow: function() {
return [ this.listBooks[0], this.listBooks[1] ]
}
}, // end of computed
methods: {
infiniteScroll($state) {
if (this.listBooks.length > 1) {
this.listBooks.forEach((item) => this.listShow.push(item))
$state.loaded()
}
else {
$state.complete()
}
}
}, // end of methods
async fetch() {
switch (this.nameRoute) {
case "short":
this.listBooks = await this.$strapi.$books.find("_sort=pageQuantity:ASC");
break;
case "programming":
this.listBooks = await this.$strapi.$books.find({ 'tags.name': ['برنامه نویسی'], _sort: 'updated_at:DESC' });
break;
case "new":
this.listBooks = await this.$strapi.$books.find("_sort=updated_at:DESC");
break;
default:
this.listBooks = this.$store.getters["books/randomBook"](this.$store.state.books.list2.length);
break;
}
}
}
</script>
<style scoped>
</style>在代码中，我在 fetch hook 中获取数据（根据页面 id 不同），然后将其放入 listBooks Vue 数据中。我想要做的是首先在 listBooks 中显示例如 2 数据，当滚动到达第二个数据（此处为第二张卡片）的末尾时，我显示使用无限滚动方法逐步其余数据。所以我使用了一个名为 listShow 的 Computed data 并在 v-for 中使用它。然后我把我认为可能在 infiniteScroll 方法中工作的代码。但显然这不起作用，因为我只是猜测。如果有人知道如何更改该代码以使其工作并以无限滚动的方式显示数据，请帮助我解决此问题。
【问题讨论】：
-
不需要
[ this.listBooks[0], this.listBooks[1] ]，保留一个数组并根据您的滚动在其中添加新值。喜欢10 items + (10 items * amount of times you reached the infinite loader bottom border)。
标签： vue.js nuxt.js vue-infinite-loading