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

相关推荐

  • vue实现下拉加载其实没那么复杂

    前言 之前缺乏移动端的经验.一直不知道上拉加载,下拉刷新是怎么实现的.现在正好有个产品有这样一个需求.想了一会没有思路.就去找插件.啥vue-infinite-scroll,vue-virtual-scroll-list.啊呀,牛!无限滚动,十万条数据渲染. 经过我一大圈的折腾.还是默默的卸载了插件.我只是需要实现一个下拉加载,不需要其他这么多的功能.看了看其他人的源码,直接撸了起来,实现一个List组件. 效果展示 MList.vue <template> <div class=&qu

  • 基于vue的下拉刷新指令和滚动刷新指令

    小编最近在实现移动端列表页面显示的时候一直在思考如何实现列表的自动更新数据,对于大多数Native App或者Web App,在列表的底部增加"加载更多"的按钮也是解决这样的问题一种交互的方式,当然,这样的交互其实还好,不过根据用户的操作习惯来看,似乎滚动刷新更多数据和下拉刷新当前数据的操作方式,更符合用户对列表分页数据的读取习惯,因此,在这里小编想简单的说说,这次在小编系统中所使用的下拉刷新和滚动刷新的实现方式! 其实,这种实现数据加载的原理很简单 在滚动刷新的时候,需要在列表滚动到

  • vueScroll实现移动端下拉刷新、上拉加载

    移动端开发,处理列表翻页和数据的时候,下拉刷新和上拉加载应用的比较广泛,今天给大家推荐一个vue的插件,vueScroll,首先上图: 话不多说,上代码了: 一.引入并使用VueScroll import VueScroller from 'vue-scroller'; Vue.use(VueScroller) 二.在html或者.vue组件里面使用 三.在js文件里面操作插件 首先在在methods里面写上方法 在data里面实现申明好 isLoading = true; 然后继续在metho

  • vue使用mint-ui实现下拉刷新和无限滚动的示例代码

    在开发web-app中,总会遇到v-for出来的li会有很多,当数据达几百上千条的时候,一起加载出来会造成用户体验很差的效果. 这时候我们可以使用无限滚动和下拉刷新来实现控制显示的数量,当刷新到底部的边界的时候会触发无限滚动的事件,再次加载一定数量的条目. 还是拿在项目中的功能来举栗子介绍. 有个列表,几千条数据,做分页查询,限制每次显示查询20条,每次拉到最后20条边缘的时候,触发无限滚动,这时候会出现加载图标,继续加载后续20条数据,加载到最后的时候会提示数据"加载完毕". 项目的

  • vue移动端下拉刷新和上滑加载

    本文实例为大家分享了vue移动端下拉刷新和上滑加载的具体代码,供大家参考,具体内容如下 组件 <template> <div class="mu-load-more" @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)"> <div class="mu-re

  • vue实现ajax滚动下拉加载,同时具有loading效果(推荐)

    代码如下所示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>vue测试ajax的使用</title> <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-

  • vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)

    一.思路分析和效果图 用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果.然后针对这几个效果的实现,捋下思路: 根据加载数据的顺序,依次追加标签展示效果: 选择哪种方式实现瀑布流,这里选择绝对定位方式: 关键问题:由于每张图片的宽高不一样,而瀑布流中要求所有图片的宽度一致,高度随宽度等比缩放.而且由于图片的加载是异步延迟.在不知道图片高度的情况下,每个图片所在的item盒子不好绝对定位.因此在渲染页面前先获取所有图片的高度,是解决问题的关键点!这里选择用JS中的Im

  • Vue记住滚动条和实现下拉加载的完美方法

    滚动条 常见于移动端 App 在滚动点击进入的时候 问题描述 当我们在开发 web app 的时候,经常会遇到一个问题,就是当从一个可滚动的列表页进入到下一个详情页面,然后返回列表页面的时候,很难去还原滚动条的状态,无法记住进来时候的位置. 以前我尝试过很多方法: 有 vue-router 自带的 scrollBehavior,需要记住 scrollTop,然后还原,但是管理这个 scrollTop 显得很麻烦,有的时候还不容易取值还有使用纯 CSS 的方式,在列表页面放置一个 router-v

  • vue插件mescroll.js实现移动端上拉加载和下拉刷新

    做一个简单的移动端展示项目,后台分页后前端加载,实现上拉加载下一页,找了下,还是用这个mescroll.js插件好一点 1.npm安装 npm install --save mescroll.js //不要使用cnpm安装 导入(在哪个页面使用,则在哪个页面导入(这里的话,我使用全局导入会出现问题,若有错,还请大家指出,暂时想到的就是局部引入)): import MescrollVue from 'mescroll.js/mescroll.vue' 注册组件: components: { Mes

  • vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新

    今天写项目的时候遇到了歌手排序的问题,联想到了我们平时的手机通讯录侧栏字母排序,按照ABCDE这样的顺序对名字进行排序. 我们先来看看效果 那就用vue来实现一遍 首先新建一个vue页面,取名为helloworld.vue 在页面里写入内容 <template> <div class="hello"> <div class="singer" id="singer"> <div class="si

  • vue 监听某个div垂直滚动条下拉到底部的方法

    如下所示: this.$nextTick(() => { const el = document.querySelector('.act-not'); const offsetHeight = el.offsetHeight; el.onscroll = () => { const scrollTop = el.scrollTop; const scrollHeight = el.scrollHeight; if ((offsetHeight + scrollTop) - scrollHeig

  • 如何封装了一个vue移动端下拉加载下一页数据的组件

    前言 简单封装了一个vue下拉加载组件,分享一下,已放到github和前端资源库,欢迎下载! 组件代码 <template> <div class="my-scroll" :class="[scrollState?'prohibit':'allow']" ref="myScroll" @scroll.passive="onScroll($event)" @touchmove="onScroll($e

随机推荐