一款用于 Vue.js 的无限滚动插件

一个正经的程序员

发布于 2023-09-13 20:26:37

3310

发布于 2023-09-13 20:26:37

文章被收录于专栏：一个正经的程序员一个正经的程序员

本文由 #公众号：一个正经的程序员原创作者：散淡样子 GitHub：https://github.com/LouisLiu00

00

前言

Web 项目经常会用到下拉滚动加载数据的功能，今天就来种草一款 Vue-infinite-loading 插件，讲解一下使用方法！（文末附链接）

开箱即用：

简洁至上的 API、内置加载动画以及良好的兼容性，可立即投入生产

双向支持：

目前支持向上和向下两种加载方式，可适应于更多的应用场景

结果展示：

可配置的加载结果展示，比如没有更多数据、没有任何数据等等

01

安装

npm install vue-infinite-loading --save

02

引用

import InfiniteLoading from 'vue-infinite-loading';

export default {
  components: { InfiniteLoading }
}

03

使用

1. 基本用法

<template>
　　<div> 
　　　　<p v-for="item in list">
　　　　　　<span v-text="item"></span> 
　　　　</p> 
　　　　<!--infinite-loading这个组件要放在列表的底部，滚动的盒子里面！--> 
　　　　<infinite-loading @infinite="infiniteHandler"></infinite-loading> 
　　</div>
</template>

<script>
　　import InfiniteLoading from 'vue-infinite-loading';

　　export default {
  　　data() {
    　　return {
      　　list: []
    　　};
  　　},
  　　methods: {
    　　infiniteHandler($state) {
      　　// 这里模仿加载延迟1秒钟
      　　setTimeout(() => {
        　　let temp = [];
        　　for (let i = this.list.length + 1; i <= this.list.length + 20; i++) {
          　　temp.push(i);
        　　}
        　　this.list = this.list.concat(temp);
        　　$state.loaded();
      　　}, 1000);
    　　},
  　　},
  　　components: { InfiniteLoading }
　　}
</script>

2. 分页用法

<template>
    <div>
        <ul>
            <li class="hacker-news-item" v-for="(item, key) in list"></li>
        </ul>
        <infinite-loading @infinite="infiniteHandler">
            <span slot="no-more">No More Data</span>
        </infinite-loading>
    </div>
</template>    

<script>
    import InfiniteLoading from 'vue-infinite-loading';
    import axios from 'axios';

    export default {
          data() {
            return {
                  list: []
            };
          },
          methods: {
            infiniteHandler($state) {
                let api="http://xxx.com/xxx";
                // api为你请求数据地址
                  axios.get(api, {
                    params: {
                        // 页码参数（10条每页）
                          page: this.list.length / 10 + 1,
                    },
                  }).then((response) => {
                    if (response.data.length) {
                        // response.data为你请求接口返回的数组列表
                          this.list = this.list.concat(response.data);
                          $state.loaded();
                          if (this.list.length / 10 === 10) {
                              // 这里是加载了10页数据，设置不在加载
                            $state.complete(); 
                          }
                    } else {
                          $state.complete();
                    }
                  });
            }
          },
          components: { InfiniteLoading }
    };
</script>

说明：state: 该组件会传递一个特殊的事件参数state给事件处理器来改变加载状态，

loaded方法用于在每次加载数据后停止播放动画，然后该组件将准备好进行下一次触发；
complete方法用于完成完整的无限加载，则该组件将不再处理任何滚动操作。如果在loaded调用complete方法时永远不会调用该方法，则此组件将显示用户的结果消息，如果不是，则将显示不再有用户消息，并且可以按slot设置其它内容；
reset方法是将组件返回到原来的状态。

3. 条件用法

<template>
    <div class="hacker-news-list">
          <div class="hacker-news-header">
              <!--下拉改变-->
              <select v-model="tag" @change="changeFilter()">
                  <option value="story">Story</option>
                  <option value="history">History</option>
              </select>
              <!--或者点击改变-->
              <button @click="changeFilter()">搜索</button>
          </div>
          <ul>
              <li class="hacker-news-item" v-for="(item, key) in list"></li>
          </ul>
          <!--不要忘记设置这个 ref="infiniteLoading"-->
          <infinite-loading @infinite="infiniteHandler" ref="infiniteLoading">
              <span slot="no-more">No more data</span>
          </infinite-loading>
    </div>
</template>

<script>
    import InfiniteLoading from 'vue-infinite-loading';
    import axios from 'axios';

    export default {
          data() {
            return {
                  list: [],
                  tag: 'story',
            };
          },
          methods: {
            infiniteHandler($state) {
                  const api="http://xxx.com/xxx";
                  // api为你请求数据地址
                  axios.get(api, {   
                    params: {
                        // 改变的条件参数
                          tags: this.tag,  
                          page: this.list.length / 10 + 1,
                    },
                  }).then(({ data }) => {
                    if (data.result.length) {
                          this.list = this.list.concat(data.result);
                          $state.loaded();
                          if (this.list.length / 20 === 10) {
                            state.complete();
                          }
                    } else {
                          $state.complete();
                    }
                  });
            },
            //改变条件条用此方法
            changeFilter() {
                  this.list = [];
                  this.$nextTick(() => {
                    this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset');
                  });
            },
          },
          components: { InfiniteLoading }
    }
</script>