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 相关文章推荐
jQuery中after的两种用法实例
Jul 03 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
Node.js读写文件之批量替换图片的实现方法
Sep 07 Javascript
轻松实现jquery选项卡切换效果
Oct 10 Javascript
微信公众号 摇一摇周边功能开发
Dec 08 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
浅谈node.js 命令行工具(cli)
May 10 Javascript
JavaScript设计模式之责任链模式实例分析
Jan 16 Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 Javascript
手把手教你实现 Promise的使用方法
Sep 02 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获取163、gmail、126等邮箱联系人地址【已测试2009.10.10】
2009/10/11 PHP
php跨域cookie共享使用方法
2014/02/20 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
JavaScript基础之流程控制语句的用法
2017/08/31 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
JavaScript实现简单动态进度条效果
2018/04/06 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
Python进行数据科学工作的简单入门教程
2015/04/01 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
Python实现分数序列求和
2020/02/25 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
C/C++ 笔试、面试题目大汇总
2015/11/21 面试题
运动会闭幕式解说词
2014/02/21 职场文书
2014年驾驶员工作总结
2014/11/18 职场文书
商务司机岗位职责
2015/04/10 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书
图文详解matlab原始处理图像几何变换
2021/07/09 Python
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android