Question

我在Nuxt.js（Vue.js）中开发Web应用程序

〜页/ 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>

并且，从＆＃39; / home＆＃39;到＆＃39; / help＆＃39;

窗口未定义

所以，我尝试了以下

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

结果，

无法安装组件：模板或渲染函数未定义。（在InfiniteLoading中找到）

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

帮帮我，谢谢。

Answer 1

如果你使用带有vue-infinite-loading的NuxtJs，你需要在plugin文件夹中创建一个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 2

我自己做，就像一个魅力。在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生产中，而不是在dev中）HTML是在通过“ props：['commentsData']，”分配变量之前编写的。因此，在某些变量存在之前会触发自动滚动功能。使用以下方法解决此问题：

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

Answer 3

我的答案是使用 NuxtJs

将 vue-infinite-loading 作为插件添加到您的 plugins 文件夹
将此添加到 nuxt.config.js 文件 => { src: '@/plugins/vue-infinite-loading.js', ssr: false }
不要将其导入到您的文件或页面中，只需使用它

如何在Nuxt.js（Vue.js）中使用vue-infinite-loading

3 个答案: