Web项目经常会用到下拉滚动加载数据的功能，今天就来种草 Vue-infinite-loading 这个插件，讲解一下使用方法！
第一步：安装
npm install vue-infinite-loading --save
第二步：引用
import InfiniteLoading from 'vue-infinite-loading' ;
export default {
components: { InfiniteLoading }
}
第三步：使用
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测试数据/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测试数据plete();
}
} else {
$state测试数据plete();
}
});
}
},
components: { InfiniteLoading }
};
</script>
说明： $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>
<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测试数据/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测试数据plete();
}
} else {
$state测试数据plete();
}
});
},
//改变条件条用此方法
changeFilter() {
this .list = [];
this .$nextTick(() => {
this .$refs.infiniteLoading.$emit( '$InfiniteLoading:reset' );
});
},
},
components: { InfiniteLoading }
}
</script>
官方链接： https://peachscript.github.io/vue-infinite-loading/
GitHub链接： https://github测试数据/PeachScript/vue-infinite-loading
以上就是 Vue 实现下拉滚动加载数据的示例的详细内容，更多关于Vue下拉滚动加载数据的资料请关注服务器之家其它相关文章！
原文链接：https://HdhCmsTestcnblogs测试数据/louis-liu-oneself/p/13405299.html
dy("nrwz");
查看更多关于Vue实现下拉滚动加载数据的示例的详细内容...