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

Posted 2023-02-22

【中文标题】如何在 Nuxt.js (Vue.js) 中使用 vue-infinite-loading

【英文标题】：How to use vue-infinite-loading in Nuxt.js (Vue.js)

【发布时间】：2017-10-28 07:01:42

【问题描述】：

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

首先， 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”

没有定义窗口

所以，我尝试了以下方法

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

结果，

挂载组件失败：未定义模板或渲染函数。（在 InfiniteLoading 中找到）

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

帮帮我，谢谢。

【参考方案1】：

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

【参考方案2】：

只是我自己做的，就像一个魅力。在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', s-s-r: false
],

提示：不要忘记正确设置infinite-scroll-disabled="autoLoadDisabled"，否则您可能会向加载函数发送垃圾邮件。

我还认识到（仅在 nuxt 生产中，而不是在开发中）html 是在通过“props：['cmetsData']”分配变量之前编写的。因此在某些变量存在之前触发自动滚动功能。解决这个问题：

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

【参考方案3】：

我的答案是使用 NuxtJs

将 vue-infinite-loading 作为插件添加到您的 plugins 文件夹中 将此添加到nuxt.config.js 文件 => src: '@/plugins/vue-infinite-loading.js', s-s-r: false 不要在您的文件或页面上导入它，直接使用它