如何在Nuxt中无需axios请求实现Vue-infinite-loading无限滚动

原有代码核心问题 #

• 计算属性listShow为只读属性，无法直接调用push方法修改，是触发逻辑不生效的核心原因
• 无分页加载控制变量，原有逻辑会一次性加载所有剩余数据，不符合逐步加载需求
• 边界判断逻辑错误，没有比对已加载数据量和总数据量的关系

具体修改步骤 #

1. 新增分页控制变量 #

在data中添加两个参数控制加载逻辑，默认每次滚动加载2条，你可以按需调整pageSize的值：

data() {
  return {
    // 原有变量全部保留
    pageSize: 2, // 每次滚动加载的条目数
    currentPage: 1 // 当前已加载的页数，初始为1对应2条展示数据
  }
}

2. 重写listShow计算属性 #

通过数组切割的方式动态控制展示的条目，不需要手动修改数组：

computed: {
  listShow() {
    return this.listBooks.slice(0, this.currentPage * this.pageSize)
  }
}

3. 重写无限滚动触发方法 #

methods: {
  infiniteScroll($state) {
    // 判断是否还有未加载的数据
    if (this.listShow.length < this.listBooks.length) {
      this.currentPage += 1
      $state.loaded()
    } else {
      // 所有数据加载完成，终止无限加载监听
      $state.complete()
    }
  }
}

完整修改后代码 #

<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: "در این قسمت می&zwnj;توانید کتابها را به ترتیب از کوچک (کمترین تعداد صفحه) به بزرگ (بیشترین تعداد صفحه) مشاهده نمایید:",
                    request: 1
                },
                programming: {
                    title: "در این قسمت می&zwnj;توانید کتب مرتبط با برنامه&zwnj;نویسی (دارای برچسب برنامه&zwnj;نویسی) را به ترتیب به روزرسانی (از جدیدترین به قدیمی&zwnj;ترین) مشاهده نمایید:",
                    request: 2
                },
                new: {
                    title: "در این قسمت می&zwnj;توانید کتب موجود در سایت را به ترتیب به روز رسانی (از جدید به قدیم) مشاهده نمایید:",
                    request: 3
                },
                random: {
                    title: "در این قسمت می&zwnj;توانید به صورت تصادفی به مشاهده تمامی کتب موجود در سایت بپردازید:",
                    request: 4
                }
            },
            nameRoute: this.$route.params.type,
            pageSize: 2,
            currentPage: 1
        }
    }, 

    computed: {
        listShow() {
            return this.listBooks.slice(0, this.currentPage * this.pageSize)
        }
    }, 

    methods: {
        infiniteScroll($state) {
            if (this.listShow.length < this.listBooks.length) {
                this.currentPage += 1
                $state.loaded()
            } else {
                $state.complete()
            }
        }
    }, 

    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>

内容的提问来源于stack exchange，提问作者hamid-davodi