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

Question

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

问题是我一打开页面（不滚动页面），立即触发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>

Answer 1

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

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