目录第一步:安装第二步:引用第三步:使用WEB项目经常会用到下拉滚动加载数据的功能,今天就来种草 Vue-infinite-loading 这个插件,讲解一下使用方法! 第一步:安装
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.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给事件处理器来改变加载状态,$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>
<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>
官方链接:https://peachscript.GitHub.io/vue-infinite-loading/
gitHub链接:https://github.com/PeachScript/vue-infinite-loading
以上就是Vue实现下拉滚动加载数据的示例的详细内容,更多关于Vue下拉滚动加载数据的资料请关注编程网其它相关文章!
--结束END--
本文标题: Vue实现下拉滚动加载数据的示例
本文链接: https://www.lsjlt.com/news/124296.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0