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 相关文章推荐
firefox中JS读取XML文件
Dec 21 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
May 18 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 Javascript
js选择器全面解析
Jun 27 Javascript
详解Angular.js中$http拦截器的介绍及使用
Jul 04 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
Node.js API详解之 repl模块用法实例分析
May 25 Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 Javascript
处理JavaScript值为undefined的7个小技巧
Jul 28 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
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
关于PHP实现异步操作的研究
2013/02/03 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
Yii2框架实现利用mpdf创建pdf文件功能示例
2019/02/08 PHP
PHP实现文件上传与下载
2020/08/28 PHP
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
原生js实现照片墙效果
2020/10/13 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
Django中的forms组件实例详解
2018/11/08 Python
python列表每个元素同增同减和列表元素去空格的实例
2019/07/20 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
国际商务系学生个人的自我评价
2013/11/26 职场文书
入团者的自我评价分享
2013/12/02 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
后进生评语大全
2015/01/04 职场文书
质量承诺书格式范文
2015/04/28 职场文书
mybatis 获取更新记录的id
2022/05/20 Java/Android