正文 

当前位置： 首页 > 知识 >

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

     2023-02-22     106

关键词：

【中文标题】如何在 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 不要在您的文件或页面上导入它，直接使用它

【讨论】：

如何在 nuxt.js 中挑选 bootstrap-vue.js 模块？

】如何在nuxt.js中挑选bootstrap-vue.js模块？【英文标题】：Howtocherry-pickbootstrap-vue.jsmodulesinnuxt.js?【发布时间】：2019-04-0512:03:04【问题描述】：我无法理解如何在nuxt.js中挑选bootstrap-vue.js模块nuxt.config.js中的以下代码正在拉取整个库... 查看详情

如何在 nuxt.js 中编写全局路由器功能

】如何在nuxt.js中编写全局路由器功能【英文标题】：howtowriteglobalrouter-functioninnuxt.js【发布时间】：2018-01-1213:11:55【问题描述】：我正在将Vue.js与Nuxt.js一起使用，但路由器的功能出现问题。在纯Vue中，我可以这样写main.js：valroute... 查看详情

如何在 Nuxt.js 中使用 CKEditor - 未定义窗口错误

】如何在Nuxt.js中使用CKEditor-未定义窗口错误【英文标题】：HowtouseCKEditorwithNuxt.js-windowisnotdefinederror【发布时间】：2020-08-1503:00:36【问题描述】：在Vue.js中，这是我使用的设置。在Nuxt.js中，我收到“未定义窗口”错误。根据我的... 查看详情

如何在 Vue.js/Nuxt.js 中为 RepositoryFactory 编写测试

】如何在Vue.js/Nuxt.js中为RepositoryFactory编写测试【英文标题】：HowtowritetestforRepositoryFactoryinVue.js/Nuxt.js【发布时间】：2022-01-2106:03:34【问题描述】：夏天我已经为Vue.js/Nuxt.js应用程序中的API连接实现了RepositoryFactory模式。https://medium... 查看详情

使用 nuxt-mail 在 Nuxt.js 中发送邮件

】使用nuxt-mail在Nuxt.js中发送邮件【英文标题】：SendingmailinNuxt.jswithnuxt-mail【发布时间】：2021-07-1011:05:47【问题描述】：我是Nuxt.js/Vue.js的新手，所以这里有一些新手问题：D我在从Nuxt.js应用程序中的联系人发送邮件时遇到问题。... 查看详情

如何测试 nuxt.js asyncData 并获取钩子

】如何测试nuxt.jsasyncData并获取钩子【英文标题】：Howtotestnuxt.jsasyncDataandfetchhooks【发布时间】：2020-12-1715:34:59【问题描述】：我一直在尝试测试使用nuxt（asyncData和fetch挂钩）的文件，我在测试vue.js正常生命周期时没有问题，但我... 查看详情

Vue.js 和 Nuxt.js

...麻烦，因为整个nuxt的工作方式之间的可见性为0%。问题：如何注册全局组件。如何在客户端行为的某些用户上切换nuxt中的布局。在哪里编写vue.use(somep 查看详情

使用 nuxt.js 和 vue.js 在 <template> 标记内加载脚本

】使用nuxt.js和vue.js在<template>标记内加载脚本【英文标题】：Loadscriptinsidethe<template>tagusingnuxt.jsandvue.js【发布时间】：2018-05-0717:29:21【问题描述】：我正在使用nuxt.js（基于vue.js）构建自定义网站，我需要使用合作伙伴提... 查看详情

如何在 Vue.js 中使用 rowspan 将指针事件应用于简单表？

】如何在Vue.js中使用rowspan将指针事件应用于简单表？【英文标题】：Howtoapplypointer-eventstosimple-tableusingrowspaninVue.js?【发布时间】：2021-02-1618:32:45【问题描述】：我在Vuetify.js框架中使用v-simple-table作为Nuxt.js制作了表格。当我点击... 查看详情

如何在 v-text 中使用条件运算符作为 Vue.Js 组件？

】如何在v-text中使用条件运算符作为Vue.Js组件？【英文标题】：HowcanIuseconditionaloperatorinv-textasVue.Jscomponents?【发布时间】：2021-03-2705:31:11【问题描述】：我正在使用Vue.Js，也使用Nuxt.js作为框架，语言是TypeScript。我真的很想使用... 查看详情

nuxt.js中使用markdown编辑器(代码片段)

...,plugins:[src:"~plugins/vue-markdown.js",ssr:false,],4.在页面中使用举例<template><div><no-ssr><mavon-editor:toolbars="markdownOption"v-model="handbook"/></no-ssr></div></template><script>exportdefaultdata()return... 查看详情

在 Vue.js 中使用类模型？

】在Vue.js中使用类模型？【英文标题】：UsingclassmodelinVue.js?【发布时间】：2018-08-0119:18:24【问题描述】：我正在使用Nuxt.js（Vue.jss-s-r框架）制作CRUD管理工具但是当对象嵌套较多时，很难处理这些对象。例如，当我有这样的对象... 查看详情

vue-awesome-swiper使用教程

...（开箱即用）官方地址：https://zh.nuxtjs.org/guideⅡ.Nuxt安装使用Ⅲ.Nuxt模板目录结构分析重点关注：components、layouts、pages、plugins、nust.config.js目录及文件Ⅳ.Nuxt路由➀.pages目录结构自动生成对应的路由配置➁路由跳转注意：... 查看详情

nuxt的介绍以及入门(代码片段)

...由掌握layouts、pages以及components的区别能够在Nuxt.js项目中使用element-ui掌握Nuxt.js中异步获取数据的方式完成豆瓣电影小案例掌握SEO的优化1.1Nuxt.js入门1.1.1什么是Nuxt.jsVue服务端渲染官网Nuxt.js官网Nuxt.js是一个基于Vue.js的 查看详情

如何在 Nuxt 中使路由区分大小写

】如何在Nuxt中使路由区分大小写【英文标题】：HowtomakeroutescasesensitiveinNuxt【发布时间】：2019-12-2017:32:18【问题描述】：我使用nuxt.js+vue.js。我需要创建路由器的区分大小写。我发现了以下属性：caseSensitive。我正在尝试将它放入n... 查看详情

基于vue.js的ssr技术—nuxt.js

为什么要使用Nuxt.jsNuxt基于一个强大的模块化架构。你可以从50多个模块中进行选择，让你的开发变得更快、更简单。对PWA的支持、添加谷歌分析到你的网页或生成网站地图，这些功能都无需重新发明轮子来获得。Nuxt.js默认会优... 查看详情

当 nuxt.js (vue.js) 中的路由更改时，Facebook 分享按钮消失

...】：在我的nuxt.js("nuxt":"^2.15.7")网络应用程序中，我正在使用fullcodeexample中所述的Facebook分享按钮。当应用程序首次加 查看详情

(Nuxt.js/Vue.js) - 脚本只运行一次，更改路由/刷新页面后停止运行

】(Nuxt.js/Vue.js)-脚本只运行一次，更改路由/刷新页面后停止运行【英文标题】：(Nuxt.js/Vue.js)-Scriptonlyworksonce,stopsworkingafterchangingroute/refreshingthepage【发布时间】：2019-08-1609:51:21【问题描述】：我正在将我的项目网站“转移”到Vue.j... 查看详情