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获得表单target属性的方法
Apr 02 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 Javascript
js实现简单的网页换肤效果
Jan 18 Javascript
bootstrap中添加额外的图标实例代码
Feb 15 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
Vue组件和Route的生命周期实例详解
Feb 10 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 Javascript
js实现蒙版效果
Jan 11 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
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
基于jquery的无刷新分页技术
2011/06/11 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
Vue封装的组件全局注册并引用
2019/07/24 Javascript
JavaScript Tab菜单实现过程解析
2020/05/13 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
python排序方法实例分析
2015/04/30 Python
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
python爬虫 模拟登录人人网过程解析
2019/07/31 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
pytorch SENet实现案例
2020/06/24 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
一套Java笔试题
2016/08/20 面试题
生物技术毕业生自荐信
2013/10/23 职场文书
诚信承诺书范文
2014/03/27 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
亮剑观后感
2015/06/05 职场文书
经典祝酒词大全
2015/08/12 职场文书
速龙x4-860k处理器相当于i几
2022/04/20 数码科技