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


Posted in Javascript onNovember 06, 2017

在开发web-app中,总会遇到v-for出来的li会有很多,当数据达几百上千条的时候,一起加载出来会造成用户体验很差的效果。
这时候我们可以使用无限滚动和下拉刷新来实现控制显示的数量,当刷新到底部的边界的时候会触发无限滚动的事件,再次加载一定数量的条目。

还是拿在项目中的功能来举栗子介绍。

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

有个列表,几千条数据,做分页查询,限制每次显示查询20条,每次拉到最后20条边缘的时候,触发无限滚动,这时候会出现加载图标,继续加载后续20条数据,加载到最后的时候会提示数据“加载完毕”。

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

项目的ui使用的mint-ui,所以使用的无限滚动也是mint-ui里面的,详细参考官方文档

接下来给大家介绍代码实现:

1、为元素添加 v-infinite-scroll 指令即可使用无限滚动。滚动该元素,当其底部与被滚动元素底部的距离小于给定的阈值(通过 infinite-scroll-distance 设置)时,绑定到 v-infinite-scroll 指令的方法就会被触发。

<!--ul里面几个scoller就是无限滚动的几个api-->
<ul class="mui-table-view" v-infinite-scroll="loadMore" infinite-scroll-disabled="moreLoading" infinite-scroll-distance="0" infinite-scroll-immediate-check="false">
 <!--li数据遍历循环部分-->
 <li class="mui-table-view-cell" v-for="item in list">
  <a class="mui-navigate-right">
   <span class="mui-pull-left">{{item.name}}</span>
   <span class="mui-pull-right">{{item.date.substring(0,10)}}</span>
  </a>
 </li>
 <!--底部判断是加载图标还是提示“全部加载”-->
 <li class="more_loading" v-show="!queryLoading">
  <mt-spinner type="snake" color="#00ccff" :size="20" v-show="moreLoading&&!allLoaded"></mt-spinner>
  <span v-show="allLoaded">已全部加载</span>
 </li>
</ul>

2、script部分

<script>
 export default {
  data() {
   return {
    //初始化无限加载相关参数
    queryLoading: false,
    moreLoading: false,
    allLoaded: false,
    totalNum: 0,
    pageSize: 20,
    pageNum: 1,
   }
  },
  computed: {
   params() {
    return{
     //这里先定义要传递给后台的数据
     //然后将每次请求20条的参数一起提交给后台
     pageSize: this.pageSize
     }
   }
  },
  methods: {
   //无限加载函数
   loadMore() {
    if(this.allLoaded){
     this.moreLoading = true;
     return;
    }
    if(this.queryLoading){
     return;
    }
    this.moreLoading = !this.queryLoading;
    this.pageNum++;
    this.$http.post("请求后台数据的接口",Object.assign({pageNum:this.pageNum},this.params)).then((res) => {
     if(res.sData && res.sData.list){
      this.list = this.list.concat(res.sData.list);
      this.allLoaded = this.debtList.length==this.totalNum;
     }
     this.moreLoading = this.allLoaded;
    });
   }
  },
 }
</script>

到这里就可以实现无限滚动了,这里结合了mint-ui的Infinite scroll和Spinner

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在JavaScript中实现命名空间
Nov 23 Javascript
JavaScript入门教程(2) JS基础知识
Jan 31 Javascript
JavaScript 空位补零实现代码
Feb 26 Javascript
JS解决ie6下png透明的方法实例
Aug 02 Javascript
ExtJS的拖拽效果示例
Dec 09 Javascript
js实现两点之间画线的方法
May 12 Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
基于Vue的ajax公共方法(详解)
Jan 20 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
Vue登录注册并保持登录状态的方法
Aug 17 Javascript
浅探express路由和中间件的实现
Sep 30 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 #Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 #Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 #Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 #Javascript
vue复合组件实现注册表单功能
Nov 06 #Javascript
基于vue组件实现猜数字游戏
May 28 #Javascript
vue路由嵌套的SPA实现步骤
Nov 06 #Javascript
You might like
PHP防CC攻击实现代码
2011/12/29 PHP
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
Javascript 中介者模式实例
2009/12/16 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
JS实现的简单折叠展开动画效果示例
2018/04/28 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
Python用input输入列表的实例代码
2020/02/07 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
Strathberry苏贝瑞中国官网:西班牙高级工匠手工打造
2020/10/19 全球购物
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
寒假实习自荐信
2014/01/26 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
社区服务理念口号
2015/12/25 职场文书
详解GaussDB for MySQL性能优化
2021/05/18 MySQL
python状态机transitions库详解
2021/06/02 Python
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP
Go语言基础函数基本用法及示例详解
2021/11/17 Golang