• 售前

  • 售后

热门帖子
入门百科

Vue实现下拉滚动加载数据的示例

[复制链接]
张小麦坡 显示全部楼层 发表于 2021-10-26 14:02:08 |阅读模式 打印 上一主题 下一主题
目次


  • 第一步:安装
  • 第二步:引用
  • 第三步:使用
Web项目常常会用到下拉滚动加载数据的功能,今天就来种草 Vue-infinite-loading 这个插件,讲解一下使用方法!

第一步:安装
  1. npm install vue-infinite-loading --save
复制代码
第二步:引用
  1. import InfiniteLoading from 'vue-infinite-loading';
  2. export default {
  3.   components: { InfiniteLoading }
  4. }
复制代码
第三步:使用

1.根本用法
  1. <template>
  2.   <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';
  3.   export default {
  4.     data() {
  5.       return {
  6.         list: []
  7.       };
  8.     },
  9.     methods: {
  10.       infiniteHandler($state) {
  11.         // 这里模仿加载延迟1秒钟
  12.         setTimeout(() => {
  13.           let temp = [];
  14.           for (let i = this.list.length + 1; i <= this.list.length + 20; i++) {
  15.             temp.push(i);
  16.           }
  17.           this.list = this.list.concat(temp);
  18.           $state.loaded();
  19.         }, 1000);
  20.       },
  21.     },
  22.     components: { InfiniteLoading }
  23.   }</script>
复制代码
2.分页用法
  1. <template>
  2.     <div>
  3.           <ul>
  4.               <li class="hacker-news-item" v-for="(item, key) in list"></li>
  5.         </ul>
  6.         <infinite-loading @infinite="infiniteHandler">
  7.             <span slot="no-more">No more Data</span>
  8.         </infinite-loading>
  9.     </div>
  10. </template>   
  11. <script>
  12.     import InfiniteLoading from 'vue-infinite-loading';
  13.     import axios from 'axios';
  14.     export default {
  15.           data() {
  16.             return {
  17.                   list: []
  18.             };
  19.           },
  20.           methods: {
  21.             infiniteHandler($state) {
  22.                 let api="http://xxx.com/xxx";
  23.                 // api为你请求数据地址
  24.                   axios.get(api, {
  25.                     params: {
  26.                         // 页码参数(10条每页)
  27.                           page: this.list.length / 10 + 1,
  28.                     },
  29.                   }).then((response) => {
  30.                     if (response.data.length) {
  31.                         // response.data为你请求接口返回的数组列表
  32.                           this.list = this.list.concat(response.data);
  33.                           $state.loaded();
  34.                           if (this.list.length / 10 === 10) {
  35.                               // 这里是加载了10页数据,设置不在加载
  36.                             $state.complete();
  37.                           }
  38.                     } else {
  39.                           $state.complete();
  40.                     }
  41.                   });
  42.             }
  43.           },
  44.           components: { InfiniteLoading }
  45.     };
  46. </script>
复制代码
阐明: $state: 该组件会传递一个特殊的变乱参数$state给变乱处置惩罚器来改变加载状态,$state参数包罗三个方法,它们是loaded方法,complete方法和reset方法。
       
  • loaded方法用于在每次加载数据后克制播放动画,然后该组件将准备好进行下一次触发。   
  • complete方法用于完成完整的无限加载,则该组件将不再处置惩罚任何滚动操作。如果在loaded调用complete方法时永远不会调用该方法,则此组件将体现用户的效果消息,如果不是,则将体现不再有效户消息,而且可以按slot设置别的内容   
  • reset方法是将组件返回到原来的状态
3.条件用法
  1. <template>
  2.     <div class="hacker-news-list">
  3.           <div class="hacker-news-header">
  4.             <!--下拉改变-->
  5.             <select v-model="tag" @change="changeFilter()">
  6.                   <option value="story">Story</option>
  7.                   <option value="history">History</option>
  8.             </select>
  9.               <!--或者点击改变-->
  10.             <button @click="changeFilter()">搜索</button>
  11.           </div>
  12.           <ul>
  13.               <li class="hacker-news-item" v-for="(item, key) in list"></li>
  14.            </ul>
  15.            <!--不要忘记设置这个 ref="infiniteLoading"-->
  16.           <infinite-loading @infinite="infiniteHandler" ref="infiniteLoading">
  17.             <span slot="no-more">No more data</span>
  18.           </infinite-loading>
  19.     </div>
  20. </template>
  21. <script>
  22.     import InfiniteLoading from 'vue-infinite-loading';
  23.     import axios from 'axios';
  24.     export default {
  25.           data() {
  26.             return {
  27.                   list: [],
  28.                   tag: 'story',
  29.             };
  30.           },
  31.           methods: {
  32.             infiniteHandler($state) {
  33.                   const api="http://xxx.com/xxx";
  34.                   // api为你请求数据地址
  35.                   axios.get(api, {   
  36.                     params: {
  37.                         // 改变的条件参数
  38.                           tags: this.tag,  
  39.                           page: this.list.length / 10 + 1,
  40.                     },
  41.                   }).then(({ data }) => {
  42.                     if (data.result.length) {
  43.                           this.list = this.list.concat(data.result);
  44.                           $state.loaded();
  45.                           if (this.list.length / 20 === 10) {
  46.                             state.complete();
  47.                           }
  48.                     } else {
  49.                           $state.complete();
  50.                     }
  51.                   });
  52.             },
  53.             //改变条件条用此方法
  54.             changeFilter() {
  55.                   this.list = [];
  56.                   this.$nextTick(() => {
  57.                     this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset');
  58.                   });
  59.             },
  60.           },
  61.           components: { InfiniteLoading }
  62.     }
  63. </script>
复制代码
官方链接:https://peachscript.github.io/vue-infinite-loading/
GitHub链接:https://github.com/PeachScript/vue-infinite-loading
以上就是Vue实现下拉滚动加载数据的示例的详细内容,更多关于Vue下拉滚动加载数据的资料请关注脚本之家别的相干文章!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作