vue-infinite-loading下拉加载

最新推荐文章于 2024-08-08 08:32:05 发布

Gone、

最新推荐文章于 2024-08-08 08:32:05 发布

阅读量455

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42396197/article/details/127891469

版权

前端专栏收录该内容

5 篇文章

订阅专栏

该博客介绍了如何在Vue.js应用中实现无限滚动加载功能。首先，通过npm安装vue-infinite-loading库，然后在组件中导入并注册。接着在模板中使用<infinite-loading>组件，设置不同的槽位显示内容，并在对应的load方法中处理分页加载数据的逻辑，更新页面状态。

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

1.安装

npm install vue-infinite-loading --save

2.导入

import InfiniteLoading from 'vue-infinite-loading'

export default {
   components:{
      InfiniteLoading
    },

}

3.使用

模板：

 <infinite-loading spinner="spiral" @infinite="load">
              <span slot="no-more">没有更多数据...</span>
              <span slot="no-results">没有更多数据......</span>
 </infinite-loading>

script:

load(state) {
         const params = {
            recordId: this.content.id,
            pageNum: this.pageNum,
            pageSize: this.pageSize
          }
          this.getData(params,state)
 },
getData(params, state) {
        logApi(params).then(res => {
          if (res.data.list.length < this.pageSize) {
            state.complete()
          } else {
            this.pageNum = this.pageNum + 1
            state.loaded()
          }
          this.msg = this.msg.length ? [...this.msg, ...res?.data?.list] : res?.data?.list
         
        })
      },