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 相关文章推荐
JS JavaScript获取Url参数,src属性参数
Mar 09 Javascript
js里取容器大小、定位、距离等属性搜集整理
Aug 19 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
详解javascript数组去重问题
Nov 06 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
javascript实现下雪效果【实例代码】
May 03 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
Nov 17 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
Vue实现手机扫描二维码预览页面效果
May 28 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 Javascript
antd配置config-overrides.js文件的操作
Oct 31 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快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
UCenter 批量添加用户的php代码
2012/07/17 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
2018/03/10 Javascript
node中的cookie的具体使用
2018/09/13 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
跟老齐学Python之正规地说一句话
2014/09/28 Python
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
python高手之路python处理excel文件(方法汇总)
2016/01/07 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
Python实现OpenCV的安装与使用示例
2018/03/30 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
python实现用户名密码校验
2020/03/18 Python
Python批量修改xml的坐标值全部转为整数的实例代码
2020/11/26 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
幼儿园教师教育感言
2014/02/28 职场文书
《观舞记》教学反思
2014/04/16 职场文书
运动会通讯稿600字
2015/07/20 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书