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

Question

我在 Nuxt.js (Vue.js) 中开发 Web 应用程序

首先， vue init nuxt/express MyProject

~page/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”

window is not defined

所以，我尝试了以下方法

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

结果，

Failed to mount component: template or render function not defined.(found in InfiniteLoading)

我尝试过 nuxt.js 文档方法。但是，我无法解决它。我想找到更准确的答案。

帮帮我，谢谢。

Answer 1

我自己就做了，效果非常好。请在评论部分查看它的实际操作:https://guessthatshit.com

安装:

npm install vue-infinite-scroll --save

在插件目录中创建文件 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;
        },
    },