我在 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 文档方法。 但是,我无法解决它。 我想找到更准确的答案。
帮帮我,谢谢。
最佳答案
我自己就做了,效果非常好。请在评论部分查看它的实际操作: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;
},
},
关于javascript - 如何在 Nuxt.js (Vue.js) 中使用 vue-infinite-loading,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44217587/