VUE无限滚动插件vue-infinite-scroll的使用详解

最新推荐文章于 2025-10-10 04:41:45 发布

原创最新推荐文章于 2025-10-10 04:41:45 发布 · 8.8k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue #列表 #javascript #前端

VUE 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中安装并使用vue-infinite-scroll插件来实现列表的无限滚动加载功能。首先通过npm安装插件，然后在组件中导入并注册指令，接着定义数据状态属性和加载数据的方法。在模板中使用v-infinite-scroll指令，并结合数据状态控制加载行为。最后展示了具体的代码实现，包括数据加载的逻辑和模板结构。

插件安装

在项目中引入vue-infinite-scroll

npm install vue-infinite-scroll --save

插件导入VUE组件

引入插件

import infiniteScroll from "vue-infinite-scroll"

导入指令

export default {
        name: "ComFlowList",
        directives: {infiniteScroll},
        data(){}
}

插件状态数据属性定义

定义插件和数据列表所需用到的数据状态属性，如下：

data(){
    return {
        dataList: [],
        dataPageNum: 1,   //列表数据加载页码
        dataPageSize: 20,   //列表数据加载每页条数
        dataLoadStop: false,  //列表数据加载停止状态
        dataLoadNomore: false    //列表数据加载是否完成
    }
}

数据加载方法定义

methods:{
    
    /**
       * 加载列表数据
       */
      loadDataList(){
        //锁定数据加载状态
        this.dataLoadStop = true;

        let requestUrl = this.dataListIntUrl
        this.dataListLoadApi(requestUrl,{
          pid: this.pid,
          cid: this.cid,
          mid: this.mid,
          pagesize: this.dataPageSize,
          pagenum: this.dataPageNum
        })
          .then( function(response) {
            let queryResult = response.data;
            let datas = response.data.list;
            this.dataList = this.dataList.concat(datas);
            if(queryResult.hasnextpage == 1){
              this.dataPageNum += 1
              this.dataLoadStop = false
            }else{
              this.dataNomore = true
            }
          }.bind(this))
          .catch(function (error) { // 请求失败处理
            console.log(error);
            this.dataLoadStop = false
          }.bind(this));
      },

}

在template中使用插件directive

<template>
          <div v-infinite-scroll="loadDataList"
               infinite-scroll-disabled="dataLoadStop"
               infinite-scroll-distance="50">
            <div v-for="(item, idx) in dataList" >
                <div class="comdata"><span>{{item.name}}</span></div>
            </div>
            <div class="list-load-end">
                <span>{{dataNomore ? "--我也是有底线的--" : "加载中..."}}</span>
            </div>
          </div>
</template>