如何在 Nuxt.js (Vue.js) 中使用 vue-infinite-loading

Question

我在 Nuxt.js (Vue.js) 中開發 Web 應用程序

首先， vue init nuxt/express MyProject

~頁面/help.vue

<template>
  <div>
    <p v-for="item in list">
      Line:
      <span v-text="item"></span>
    </p>
    <infinite-loading :on-infinite="onInfinite" spinner="bubbles" ref="infiniteLoading"></infinite-loading>
   </div>
</template>
<script>
let InfiniteLoading = require('vue-infinite-loading')
export default {
  ...
  components: {
    InfiniteLoading
  },
  methods: {
    onInfinite: function () {
      setTimeout(() => {
      const temp = []

      for (let i = this.list.length + 1; i <= this.list.length + 20; i++) {
          temp.push(i)
        }
      this.list = this.list.concat(temp)
      this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded')
      }, 1000)
    }
  }
} 
</script>

並且，從“/home”移動到“/help”

窗口未定義

所以，我嘗試了以下

let InfiniteLoading;
if (process.BROWSER_BUILD) {
  InfiniteLoading = require('vue-infinite-loading')
}

結果，

無法掛載組件：未定義模板或渲染函數。（在 InfiniteLoading 中找到）

我試過 nuxt.js 文檔方法。 但是，我無法解決它。 我想找到更准確的答案。

幫幫我，謝謝。

Answer 1

只是自己做的，就像一個魅力。 在https://guessthatshit.com 的評論部分查看它的實際效果

安裝：

npm install vue-infinite-scroll --save

在 plugins 目錄中創建文件 vue-infinite-scroll.js：

import Vue from 'vue'
import InfiniteScroll from 'vue-infinite-scroll'

Vue.use(InfiniteScroll);

更新 nuxt.config.js 以包含以下條目：

plugins: [
    {src: '~plugins/vue-infinite-scroll.js', ssr: false}
],

提示：不要忘記正確設置 infinite-scroll-disabled="autoLoadDisabled" 否則您可能會向加載函數發送垃圾郵件。

我還認識到（僅在 nuxt 生產中，而不是在開發中）HTML 是在通過“props: ['commentsData'],”分配變量之前編寫的。 因此在某些變量存在之前觸發自動滾動功能。 解決這個問題：

    computed: {
        autoLoadDisabled() {
            return this.loading || this.commentsData.length === 0;
        },
    },

Answer 2

如果你使用 NuxtJs 和 vue-infinite-loading，你需要在插件文件夾中創建一個 file.js：

import Vue from 'vue'
import InfiniteLoading from 'vue-infinite-loading/src/components/Infiniteloading.vue'
Vue.use(InfiniteLoading)

之后，您在 nuxt.config.js 中創建供應商構建：

build: {
   vendor: ['~/plugins/infiniteload.js']
},

Answer 3

我的答案是使用 NuxtJs

1. 在plugins文件夾中添加 vue-infinite-loading 作為插件
2. 將此添加到nuxt.config.js文件 => { src: '@/plugins/vue-infinite-loading.js', ssr: false }
3. 不要在您的文件或頁面上導入它，只需使用它