做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="/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) {$plete(); //这里是加载了10页数据,设置不在加载}} else {$plete();}});},},components: {InfiniteLoading,},};
loaded方法用于在每次加载数据后停止播放动画,然后该组件将准备好进行下一次触发。complete方法用于完成完整的无限加载,则该组件将不再处理任何滚动操作。如果在loaded调用complete方法时永远不会调用该方法,则此组件将显示用户的否结果消息,如果不是,则将显示不再有用户消息,并且可以按slot设其它内容reset方法是将组件返回到原来的状态$state: 该组件会传递一个特殊的事件参数$state给事件处理器来改变加载状态,
$state参数包括三个方法,它们是loaded方法,complete方法和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="/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) {$plete();}} else {$plete();}});},//改变条件条用此方法 changeFilter() {this.list = [];this.$nextTick(() => {this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset');});},},components: {InfiniteLoading,},};
4.其他用法(特殊条件手动触发)
在大多数情况下,我们希望立即为空列表加载数据,这也是该组件的默认行为。如果你只想控制第一次加载,你可以简单地使用v-if和v-else指令来实现它,但是如果,在一些复杂的情况下,我们需要手动每三页加载一次数据,我们可以使用该方法,
这里我不做详细介绍。有这个需求的可以去看看官方文档:vue-infinite-loading