vue mintui-Loadmore结合实现下拉刷新和上拉加载示例


Posted in Javascript onOctober 12, 2017

mintui是饿了么团队针对vue开发的移动端组件库,方便实现移动端的一些功能,这里只用了Loadmore功能实现移动端的上拉分页刷新,下拉加载数据,废话不说上代码。

<template> 
 <div class="main-body" :style="{'-webkit-overflow-scrolling': scrollMode}"> 
  <v-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore"> 
   <ul class="list" v-for="(val, key) in pageList"> 
    <li> 
     <div>我是小11</div> 
     <div>我是小11</div> 
    </li> 
   </ul> 
  </v-loadmore> 
 </div> 
</template> 
<script> 
 import {Loadmore} from 'mint-ui'; 
 export default { 
  data:function() { 
   return { 
    searchCondition:{ //分页属性 
     pageNo:"1", 
     pageSize:"10" 
    }, 
    pageList:[], 
    allLoaded: false, //是否可以上拉属性,false可以上拉,true为禁止上拉,就是不让往上划加载数据了 
    scrollMode:"auto" //移动端弹性滚动效果,touch为弹性滚动,auto是非弹性滚动 
   } 
  }, 
  components: { 
   'v-loadmore':Loadmore // 为组件起别名,vue转换template标签时不会区分大小写,例如:loadMore这种标签转换完就会变成loadmore,容易出现一些匹配问题 
               // 推荐应用组件时用a-b形式起名 
  }, 
  mounted(){ 
   this.loadPageList(); //初次访问查询列表 
  }, 
  methods: { 
   loadTop:function() { //组件提供的下拉触发方法 
    //下拉加载 
    this.loadPageList(); 
    this.$refs.loadmore.onTopLoaded();// 固定方法,查询完要调用一次,用于重新定位 
   }, 
   loadBottom:function() { 
    // 上拉加载 
    this.more();// 上拉触发的分页查询 
    this.$refs.loadmore.onBottomLoaded();// 固定方法,查询完要调用一次,用于重新定位 
   }, 
   loadPageList:function (){ 
     // 查询数据 
    this.api.PageList(this.searchCondition).then(data =>{ 
     // 是否还有下一页,加个方法判断,没有下一页要禁止上拉 
     this.isHaveMore(data.result.haveMore); 
     this.pageList = data.result.pageList; 
     this.$nextTick(function () { 
      // 原意是DOM更新循环结束时调用延迟回调函数,大意就是DOM元素在因为某些原因要进行修改就在这里写,要在修改某些数据后才能写, 
      // 这里之所以加是因为有个坑,iphone在使用-webkit-overflow-scrolling属性,就是移动端弹性滚动效果时会屏蔽loadmore的上拉加载效果, 
      // 花了好久才解决这个问题,就是用这个函数,意思就是先设置属性为auto,正常滑动,加载完数据后改成弹性滑动,安卓没有这个问题,移动端弹性滑动体验会更好 
      this.scrollMode = "touch"; 
     }); 
    }); 
   }, 
   more:function (){ 
     // 分页查询 
    this.searchCondition.pageNo = parseInt(this.searchCondition.pageNo) + 1; 
    this.api.loadPageList(this.searchCondition).then(data=>{ 
     this.pageList = this.pageList.concat(data.result.pageList); 
     this.isHaveMore(data.result.haveMore); 
    }); 
   }, 
   isHaveMore:function(isHaveMore){ 
    // 是否还有下一页,如果没有就禁止上拉刷新 
    this.allLoaded = true; //true是禁止上拉加载 
    if(isHaveMore){ 
     this.allLoaded = false; 
    } 
   } 
  } 
 } 
</script>

花了点时间整理了下代码,复制后改改就能用了,当然你要有基本的vue开发框架,并且有点开发基础,代码很简单,这个插件很好用,效果不错,加载时的文字什么的可以自己修改,比如增加箭头什么的,可以看文档。

PS:有个坑一定要注意就是注释里说的iPhone里loadmore和-webkit-overflow-scrolling属性冲突无法上拉问题,还是vue学的不精,浪费了太多时间,引以为戒

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

Javascript 相关文章推荐
javascript appendChild,innerHTML,join性能比较代码
Aug 29 Javascript
手把手教你自己写一个js表单验证框架的方法
Sep 14 Javascript
深入解析contentWindow, contentDocument
Jul 04 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
jQuery日期范围选择器附源码下载
May 23 jQuery
利用babel将es6语法转es5的简单示例
Dec 01 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 Javascript
Nuxt的路由配置和参数传递方式
Nov 06 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 Javascript
javascript实现倒计时关闭广告
Feb 09 Javascript
AngularJS 中的数据源的循环输出
Oct 12 #Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 #Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 #Javascript
Angular实现预加载延迟模块的示例
Oct 12 #Javascript
使用cookie绕过验证码登录的实现代码
Oct 12 #Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 #jQuery
使用原生js封装的ajax实例(兼容jsonp)
Oct 12 #Javascript
You might like
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
php学习之简单计算器实现代码
2011/06/09 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
jQuery网页定位导航特效实现方法
2016/12/19 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
2018/05/24 jQuery
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
python 正则表达式 概述及常用字符
2009/05/04 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
python解析多层json操作示例
2019/12/30 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
什么是Remote Module
2016/06/10 面试题
高中生自我鉴定范文
2013/10/30 职场文书
学年自我鉴定
2014/01/16 职场文书
终止合同协议书
2014/04/17 职场文书
毕业生党员个人总结
2015/02/14 职场文书
爱心募捐通知范文
2015/04/27 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
2015大学迎新标语
2015/07/16 职场文书
企业愿景口号
2015/12/25 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
2022年四月新番
2022/03/15 日漫
MySQL去除密码登录告警的方法
2022/04/20 MySQL