mui上拉加载更多下拉刷新数据的封装过程


Posted in Javascript onNovember 03, 2017

辗转用mui做了两个项目,空下来把mui上拉加载更多,下拉刷新数据做了一个简单的封装,希望可以帮助到需要的朋友

demo项目的结构

mui上拉加载更多下拉刷新数据的封装过程

直接贴代码了

index.html

mui上拉刷新下拉加载都这里了,两个方法搞定

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"> 
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 <title>mui上拉刷新下拉加载demo--封装</title>
 <script src="js/mui.min.js"></script>
 <link href="css/mui.min.css" rel="external nofollow" rel="stylesheet"/>
 <style type="text/css">
 li{
  height: 30px;
 line-height: 30px;
  font-size: 14px;
  color: #bbb;
  text-indent: 4%;
  border-bottom: 1px solid currentColor;
 }
 </style>
</head>
<body>
 <!--下拉刷新容器-->
 <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
  <div class="mui-scroll">
  <!--数据列表-->
  <ul class="mui-table-view mui-table-view-chevron" id="list">
  </ul>
  </div>
 </div>
</body>
<script type="text/javascript" charset="utf-8">
 var pager = {};//分页
 var totalPage;//总页码
 pullRefresh(pager);//启用上拉下拉 
 function pullRefresh(){
  mui("#refreshContainer").pullRefresh({
  up:{
   contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容
    contentnomore:'没 有 更 多 数 据 了',//可选,请求完毕若没有更多数据时显示的提醒内容;
   callback:function(){//必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
     window.setTimeout(function(){
    getData(pager);
    },500);
   }
   },
   down : {
    height:50,//可选,默认50.触发下拉刷新拖动距离,
    auto: true,//可选,默认false.首次加载自动下拉刷新一次
    contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容
    contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容
    contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容
    callback :function(){ //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
    window.setTimeout(function(){
     pager['size']= 3;//条数
    pager['page'] = 1;//页码  
    //刷新要先清空父节点里面的子节点
    var f = document.getElementById("list");
    var childs = f.childNodes;
    for(var i = childs.length - 1; i >= 0; i--) {
     f.removeChild(childs[i]);
    }
    getData(pager);
    },500);
    }
   }
  })
 }
 //这个方法是负责向接口请求数据的,你可以选择你喜欢的方式,我这里是直接用的mui.ajax
 function getData(params){
  mui.ajax("/article/getArticlePage",{
   data:{
   "header":{"os":"wap","app":"xxxx","ver":1.0},
   "data":params
   },
   dataType:'json',
   type:'post',
   headers:{'Content-Type':'application/json'},
   success:function(data){
     mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
    //下面这坨都是在拼dom 你可以用jquery 或者是你所熟悉的angular,vue双向绑定
    var returnData = data.data;
    var element=document.getElementById("list");
    var para;
    var node;
    for(var i = 0; i<returnData.length;i++){
    para = document.createElement("li");
    node = document.createTextNode(returnData[i].article_title)
    para.appendChild(node);
    element.appendChild(para);
    }
    //这里很重要,这里获取页码 公式:总条数/每页显示条数
    totalPage = data.ext%pager.size!=0?
    parseInt(data.ext/pager.size)+1:
    data.ext/pager.size;
    if(totalPage==pager.page){//总页码等于当前页码,停止上拉下拉
    mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
    }else{
   pager.page++;
   mui('#refreshContainer').pullRefresh().refresh(true);
    }   
   },
   error:function(xhr,type,errorThrown){
   //异常处理;
   console.log(type);
   }
   })
  } 
</script>
</html>

代码就贴完了 就是看起来不是很好看

下面是效果图,想弄视频上来的 然后发现太鸡肋了 弄不上来  气死我了

mui上拉加载更多下拉刷新数据的封装过程mui上拉加载更多下拉刷新数据的封装过程mui上拉加载更多下拉刷新数据的封装过程

PS:下面给大家分享一段示例代码:MUI 做上拉下拉加载更多数据小记

html代码

<div id="pullrefresh" class="mui-content mui-scroll-wrapper"> 
    <div id="mui-scroll" class="mui-scroll"> 
      <ul id="refresh-ul" class="mui-table-view"> 
        <!-- 内容 --> 
      </ul> 
    </div> 
  </div> 
<script type="text/javascript"> 
mui('body').on('tap','a',function(){document.location.href=this.href;});//监听让页面A标签的超链接 是有效状态 
mui.init({ 
   pullRefresh : { 
    container:"#pullrefresh",//下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等 
    up : { 
     height:50,//可选,默认50.触发下拉刷新拖动距离, 
     auto: true,//可选,默认false.自动下拉刷新一次 
     contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容 
     contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容 
     contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容 
     callback :function(){ 
      //业务逻辑代码,比如通过ajax从服务器获取新数据; 
        //注意,加载完新数据后,必须执行如下代码,注意:若为ajax请求,则需将如下代码放置在处理完ajax响应数据之后 
         //mui('#refresh-ul').pullRefresh().endPullupToRefresh(); //refresh completed  
          var pagecount=$("#pagecount").val(); 
          var page=$("#page").val(); 
          pagecount=parseInt(pagecount); 
          page=parseInt(page); 
          page+=1; 
          $.ajax({ 
            url:"/mobile/seckill/order/order_refresh_ajax.jhtml", 
            type: 'post', 
            datatype:'html', 
            data: {'pagecount': pagecount,'page':page}, 
            async: false,//false代表只有在等待ajax执行完毕后才执行 
            success: function(data,msg){ 
              $("#refresh-ul").append(data); 
              $("#page").val(page); 
            }, 
            error: function(data,msg){ 
              alert("error"); 
            } 
            }); 
        this.endPullupToRefresh(false); 
     } //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据; 
    } 
   } 
  }); 
if(mui.os.plus) { 
  mui.plusReady(function() { 
    setTimeout(function() { mui('#pullrefresh').pullRefresh().pullupLoading(); }, 1000); 
  }); 
} else { 
  mui.ready(function() {  
    mui('#pullrefresh').pullRefresh().pullupLoading();  
  }); 
} 
function goShoppingCart() { 
  window.location.href = "/mobile/seckill/shoppingcart.jhtml"; 
} 
</script>

总结

以上所述是小编给大家介绍的mui上拉加载更多下拉刷新数据的封装过程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript学习指南
Dec 01 Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
Javascript中 toFixed四舍六入方法
Aug 21 Javascript
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 Javascript
基于ES6作用域和解构赋值详解
Nov 03 #Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 #Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 #Javascript
React-intl 实现多语言的示例代码
Nov 03 #Javascript
ztree实现左边动态生成树右边为内容详情功能
Nov 03 #Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 #Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 #Javascript
You might like
php微信开发之音乐回复功能
2018/06/14 PHP
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
python re正则表达式模块(Regular Expression)
2014/07/16 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
基于Python的Post请求数据爬取的方法详解
2019/06/14 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
地球一小时宣传标语
2014/06/24 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
2014年化验员工作总结
2014/11/18 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
党员心得体会范文2016
2016/01/23 职场文书
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers
Python+tkinter实现高清图片保存
2022/03/13 Python
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫