Vue-infinite-scroll在nuxt工程中使用

最新推荐文章于 2024-10-09 09:08:59 发布

GeXueliu

最新推荐文章于 2024-10-09 09:08:59 发布

阅读量1.1k

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/GeXueliu/article/details/107719201

版权

本文介绍如何在Nuxt.js项目中使用vue-infinite-scroll插件。首先，在plugins目录创建vue-infinite-scroll.js文件，然后在nuxt.config.js配置文件中进行设置。在需要实现无限滚动的页面引入该插件，目前遇到的问题是在vue-infinite-scroll.js的特定写法导致报错，具体错误待解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-infinite-scroll在nuxt工程中使用

在plugins目录下新建vue-infinite-scroll.js

import Vue from "vue";
import infiniteScroll from "vue-infinite-scroll"
export default () => {
    Vue.use(infiniteScroll)
  }

在nuxt.config.js中添加如下内容

 plugins:[
    {src:"~plugins/vue-infinite-scroll.js",ssr:false},
  ],

在需要使用瀑布流页面引入

<div class="activity-list" v-infinite-scroll="loadMore()" > //这里也可写作"loadMore"
export default {
    data () {
        return {
            page:1,
            size:10
        }
    },
    created () {
        
    },
    methods: {
        loadMore() {
            gatheringApi.searchPage({},++this.page,this.size).then(res=> {
                let list = res.data.data;
                // console.log(list)
                /