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对象和DOM对象相互转化
Apr 24 Javascript
jQuery 前的按键判断代码
Mar 19 Javascript
javascript 寻找错误方法整理
Jun 15 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
JS打开摄像头并截图上传示例
Feb 18 Javascript
详解javascript replace高级用法
Feb 17 Javascript
用jQuery实现抽奖程序
Apr 12 jQuery
JS实现手写 forEach算法示例
Apr 29 Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 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
mysql5写入和读出乱码解决
2006/11/25 PHP
php 缓存函数代码
2008/08/27 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
2018/08/16 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
Django基础之Model操作步骤(介绍)
2017/05/27 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
用python生成1000个txt文件的方法
2018/10/25 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
详解用python写一个抽奖程序
2019/05/10 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
个人找工作的自我评价
2013/10/17 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
2016年春季运动会广播稿
2015/08/19 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
Python基础教程,Python入门教程(超详细)
2021/06/24 Python
Python re.sub 反向引用的实现
2021/07/07 Python