• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

  • 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.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下拉滚动加载数据的资料请关注极客世界其它相关文章!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
React 非父子组件传参的实例代码发布时间:2022-02-05
下一篇:
详解Element-ui NavMenu子菜单使用递归生成时使用报错发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap