vue-infinite-scroll使用

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

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

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

57 篇文章

订阅专栏

本文详细介绍如何在Vue项目中安装并使用无限滚动插件，实现数据懒加载效果。通过具体代码示例，展示了从安装插件、配置全局使用到在组件中应用无限滚动的全过程。同时，解释了关键参数的作用及事件触发机制。

1、安装

npm install vue-infinite-scroll --save

2、使用main.js

import infiniteScroll from  'vue-infinite-scroll'
Vue.use(infiniteScroll);

3、使用

<ul>
                <li v-for="(item, index) in list"
                    :key="index">
                  <div>{{item}}-要加载的数据</div>
                </li>
              </ul>
              <div v-infinite-scroll="loadMore"
                   infinite-scroll-disabled="busy"
                   infinite-scroll-distance="20">
                <p v-if="showLoading">加载中...</p>
                <p v-else>数据加载完成</p>
              </div>

data () {
    return {
      list: [],
      params: {
        page: 1,
        rows: 5
      },
      busy: true,
      showLoading: true
    }
  },

loadMore加载事件，当鼠标滚动到一定距离会加载这个事件。

busy：判断是否加载loadMore,true表示禁止加载，false表示启用

methods: {
    // 根据传入的flag判断是加载更多还是初次加载
    getList (flag) {
      axios.get(`/list?page=${this.params.page}&rows=${this.params.rows}`).then(result => {
        console.log(result);
        var res = result.data;
        if (res.status == 1) { // 请求成功
          if (flag) { // 加载更多
            this.goodsList = this.goodsList.concat(res.result.list);
            // 如果返回的条数为0,表示已加载完，设置busy为true禁止加载
            if (res.result.count == 0) {
              this.busy = true;
              this.showLoading = false;
            } else {
              this.busy = false;
            }
          } else { // 初次加载
            this.goodsList = res.result.list;
            // 初次加载完成后启用busy
            this.busy = false;
          }
        } else {
          this.goodsList = [];
        }
      })
    },
    loadMore () {
// 在加载之前设置busy为true禁止加载，当前加载完成后再启用
      this.busy = true;
      setTimeout(() => {
        this.params.page++;
        this.getList(true);
      }, 1000)

    }
  }