页面加载后立即触发Nuxt.js无限加载

问题描述

我正在将Nuxt.js与Infinite loading配合使用，以便在用户向下滚动页面时提供更多列表文章。我已经将无限加载插件放在文章列表的底部（从一开始就列出了至少10篇文章，因此在到达初始列表的末尾之前，我们必须向下滚动很多）。 / p>

问题在于，一旦打开页面（不滚动页面），就会立即触发infiniteScroll方法，并且列表中会加载更多文章（我正在控制台中调试打印“我被称为“）。

我不明白为什么会这样。

<template>
  <main class="mdl-layout__content mdl-color--grey-50">
    <subheader :Feedwebsites="Feedwebsites" />
    <div class="mdl-grid demo-content">
      <transition-group name="fade" tag="div" appear>
        <Feedarticle
          v-for="FeedArticle in FeedArticles"
          :key="FeedArticle.id"
          :Feedarticle="FeedArticle"
          @delete-article="updateArticle"
          @read-article="updateArticle"
          @write-article="updateArticle"
          @read-later-article="updateArticle"
        ></Feedarticle>
      </transition-group>
    </div>
    <infinite-loading spinner="circles" @infinite="infiniteScroll">
      <div slot="no-more"></div>
      <div slot="no-results"></div
    ></infinite-loading>
  </main>
</template>

<script>
import { mapState,mapGetters } from 'vuex'
import subheader from '~/components/subheader.vue'
import Feedarticle from '~/components/Feedarticle.vue'
export default {
  components: {
    subheader,Feedarticle,},props: {
    Feedwebsites: {
      type: Array,default() {
        return []
      },computed: {
    ...mapState({
      FeedArticles: (state) => state.Feedreader.Feedarticles,}),...mapGetters({
      getInfiniteEnd: 'Feedreader/getInfiniteEnd',methods: {
    async updateArticle(id,status) {
      try {
        const payload = { id,status }
        await this.$store.dispatch('Feedreader/updateFeedArticle',payload)
      } catch (e) {
        window.console.log('Problem with uploading post')
      }
    },infiniteScroll($state) {
      window.console.log('I've been called')
      setTimeout(() => {
        this.$store.dispatch('Feedreader/increasePagination')
        try {
          this.$store.dispatch('Feedreader/fetchFeedArticles')
          if (this.getInfiniteEnd === false) $state.loaded()
          else $state.complete()
        } catch (e) {
          window.console.log('Error ' + e)
        }
      },500)
    },}
</script>

<style scoped>
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,.fade-leave-active {
  transition: opacity 0.5s ease-out;
}
</style>

解决方法

将<infinite-loading>放入<client-only>标记中：

<client-only>
   <infinite-loading></infinite-loading>
</client-only>