vue2.0无限滚动加载数据插件

Posted tuspring

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue2.0无限滚动加载数据插件相关的知识,希望对你有一定的参考价值。

 

做vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录!

安装:npm install vue-infinite-loading –save

引入

ES6

import InfiniteLoading from vue-infinite-loading;

export default {
  components: {
    InfiniteLoading,
  },
};

CommonJS

const InfiniteLoading = require(vue-infinite-loading);

export default {
  components: {
    InfiniteLoading,
  },
};

1.用法一(基本用法)

Template

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

Script

import InfiniteLoading from vue-infinite-loading;

export default {
  data() {
    return {
      list: [],
    };
  },
  methods: {
    infiniteHandler($state) {
      setTimeout(() => {
        const 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,
  },
};

2.用法二(一般的分页数据)

Template

<div class="hacker-news-list">
  <ul>
      <li class="hacker-news-item" v-for="(item, key) in list"></li>
  </ul>
  <infinite-loading @infinite="infiniteHandler">
    <span slot="no-more">
      There is no more Hacker News
    </span>
  </infinite-loading>
</div>

Script

import InfiniteLoading from vue-infinite-loading;
import axios from axios;

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

$state: 该组件会传递一个特殊的事件参数$state给事件处理器来改变加载状态,
$state参数包括三个方法,它们是loaded方法,complete方法和reset方法。

  • 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>
    </select>
      <!--或者点击改变-->
    <button @click="changeFilter()">搜索</button>
  </div>

  <ul>
      <li class="hacker-news-item" v-for="(item, key) in list"></li>
   </ul>
  <infinite-loading @infinite="infiniteHandler" ref="infiniteLoading">  <!--不要忘记设置这个 ref="infiniteLoading"-->
    <span slot="no-more">
      There is no more Hacker News
    </span>
  </infinite-loading>
</div>

Script

import InfiniteLoading from vue-infinite-loading;
import axios from axios;

export default {
  data() {
    return {
      list: [],
      tag: story,
    };
  },
  methods: {
    infiniteHandler($state) {
      const api="http://xxxx.com/xxx"
      axios.get(api, {   //api为你请求数据地址
        params: {
          tags: this.tag,  //改变的条件参数
          page: this.list.length / 10 + 1,
        },
      }).then(({ data }) => {
        if (data.hits.length) {
          this.list = this.list.concat(data.hits);
          $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,
  },
};

4.其他用法(特殊条件手动触发)

在大多数情况下,我们希望立即为空列表加载数据,这也是该组件的默认行为。如果你只想控制第一次加载,你可以简单地使用v-if和v-else指令来实现它,但是如果,在一些复杂的情况下,我们需要手动每三页加载一次数据,我们可以使用该方法,

 

这里我不做详细介绍。有这个需求的可以去看看官方文档:vue-infinite-loading

以上是关于vue2.0无限滚动加载数据插件的主要内容,如果未能解决你的问题,请参考以下文章

JRoll 2 使用文档(史上最强大的下拉刷新,滚动,无限加载插件)

vue的爬坑之路之----基于vue-cli 无限滚动插件无限加载

关于软件开发商的选择,你要注意这几点

Wordpress 插件“无限滚动”(jQuery)破解帮助

如果启用了无限滚动,如何防止剑道网格两次加载数据?

vue2.0 代码功能片段