Vue中怎样做下划滚动加载数据的效果？-群英

上一篇：Vue项目中用递归生成子菜单报错问题怎么办下一篇：vue用户登录切换实现及常见问题如何处理

今天小编跟大家讲解下有关“Vue中怎样做下划滚动加载数据的效果？”的内容，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了相关资料，希望小伙伴们看了有所帮助。

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= "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方法。

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>  <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>