zoukankan      html  css  js  c++  java
  • vue2.0无限滚动加载数据插件

     

    做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="http://xxxx.com/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) {
                $state.complete(); //这里是加载了10页数据,设置不在加载
              }
            } else {
              $state.complete();
            }
          });
        },
      },
      components: {
        InfiniteLoading,
      },
    };

    $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>
        </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="http://xxxx.com/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) {
                $state.complete();
              }
            } else {
              $state.complete();
            }
          });
        },
    
        //改变条件条用此方法
        changeFilter() {
          this.list = [];
          this.$nextTick(() => {
            this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset');
          });
        },
      },
      components: {
        InfiniteLoading,
      },
    };

    4.其他用法(特殊条件手动触发)

    在大多数情况下,我们希望立即为空列表加载数据,这也是该组件的默认行为。如果你只想控制第一次加载,你可以简单地使用v-if和v-else指令来实现它,但是如果,在一些复杂的情况下,我们需要手动每三页加载一次数据,我们可以使用该方法,

    这里我不做详细介绍。有这个需求的可以去看看官方文档:vue-infinite-loading

  • 相关阅读:
    Dot Net WinForm 控件开发 (七) 为属性提下拉式属性编辑器
    WinForm 程序的界面多语言切换
    c#遍历HashTable
    Dot Net WinForm 控件开发 (三) 自定义类型的属性需要自定义类型转换器
    Dot Net WinForm 控件开发 (六) 为属性提供弹出式编辑对话框
    Dot Net WinForm 控件开发 (一) 写一个最简单的控件
    Dot Net WinForm 控件开发 (四) 设置属性的默认值
    Dot Net WinForm 控件开发 (二) 给控件来点描述信息
    Dot Net WinForm 控件开发 (八) 调试控件的设计时行为
    Dot Net WinForm 控件开发 (五) 复杂属性的子属性
  • 原文地址:https://www.cnblogs.com/tuspring/p/9803424.html
Copyright © 2011-2022 走看看