mui 上拉加载 实现分页加载功能,效果图:

分页功能(上拉加载):

1、引入需要的css、js文件

<link href="static/css/mui.css" rel="stylesheet" />
<!-- js -->
<script src="static/js/jquery-3.2.0.js"></script>
<script src="static/js/mui.min.js"></script>

2、dom结构

<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<div class="order_list">
</div>
</div>
</div>

3、动态获取数据,实现上拉加载<script>

   (function(){
    var lastPage; //总共页数
    var currPage=1; //当前页码
    var counter=1; //计数器     function getList(){
  var result="";
      $.ajax({
  url:'http://www.aaa.com/api/test/refreshPage?page='+counter, //api
  type:'get',
        dataType:"json",
        timeout:10000,
  data:{},
        error:function(data){
  console.log("error")
        },
        success:function(res){
          lastPage = res.data.last_page;
          currPage = res.data.current_page;
          var data = res.data.data;           $.each(data,function(i,value){
            result += '<div class="order_item">'
                   +'<div class="order_title">'
                      +'<div class="order_number">订单编号:'+value.order_no+'</div>'
                      +'<div class="order_date">'+value.created_at+'</div>'
                    +'</div>'
                    +'<div class="order_msg">'
                      +'<div class="order_img">'
                        +'<img src="'+upload_path+value.image_url+'" />'
                      +'</div>'
                      +'<div class="order_info">'
                        +'<p class="info_txt info_title">'+value.goods_name+'</p>'
                        +'<p class="info_txt">'+value.machine_name+'('+value.machine_no+')</p>'
                        +'<p class="info_txt">订单状态:<span class="success_status">'+value.order_status+'</span></p>'
                      +'</div>'
                      +'<div class="order_price">'+value.amount+'元</div>'
                    +'</div>'
                   +'</div>';
                            jQuery(result).insertBefore('#pullrefresh .mui-scroll .mui-table-view');
},
})
} //上拉加载
mui.init({
pullRefresh : {
container:'#pullrefresh',//待刷新区域标识,querySelector能定位的css选择器均可,比如:id、.class等
up : {
height:50,//可选.默认50.触发上拉加载拖动距离
auto:true,//可选,默认false.自动上拉加载一次
contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容
contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容;
callback :pullupRefresh //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
}
}
}); function pullupRefresh(){
setTimeout(function(){
getList();
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++counter>lastPage));
},1500)
}
})(); </script>

注意:

mui中的pullupRefresh会阻止onclick触发事件及a标签链接,可以通过下面方式进行触发事件及跳转:

如:

result += '<div class="item_wrap clearfix" data-url="http://www.baidu.com" id='+value.id+' >'
+ '<div class="id_wrap" >'+value.id+'</div>'
+ '<div class="cont_wrap" >'
+ '<div class="order_no_wrap" >'+value.order_no+'</div>'
+ '<div class="data_wrap" >'+value.created_at+'</div>'
+ '</div>'
+ '</div>';
$(function() {
//mui触屏点击
$("#pullrefresh").on('tap', '.item_wrap', function(event) {
var url = $(this).attr("data-url");
location.href = url;
});
})

mui 上拉加载 实现分页加载功能的更多相关文章

  1. mui 上拉加载更多的使用

    最近工作之余在用mui的框架开发,对mui了解了一些.在真正的app开发项目中,mui上拉加载模块中有两个坑,现在说一下. 1.在函数自己上拉加载行为后的回调函数 该函数是必须要写的,用来写自己的逻辑 ...

  2. MUI - 上拉加载不执行

    mui('#pullrefresh').pullRefresh().refresh(true); if($(".list-item").length == countDataSum ...

  3. MUI - 上拉刷新/下拉加载

    新闻信息列表必备的功能,支持Table,Ul等列表. 以下是DIV版本,在安卓端或者ios端必须使用双webview模式,传送门:http://dev.dcloud.net.cn/mui/pulldo ...

  4. mui上拉加载

    最近在做移动端的项目,用到了mui的上拉加载,整理如下: 1.需要引入的css.js <link rel="stylesheet" href="common/mui ...

  5. jquery 和 mui 上拉加载

    jquery: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <m ...

  6. mui上拉刷新+下拉加载

    具体操作见代码: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...

  7. mui 上拉加载更多

    看起来很简单的东西,实践过程中还是出现了很多麻烦,比如上拉时,状态条跑到了顶部,因为内容没有添加到容器中,再比如下拉的回调函数使用问题,this的传递. html实现部分: <div class ...

  8. mui 上拉加载

    最近做到移动端页面的开发,需要mui 的上拉刷新功能,最后实现后整理代码如下: 1.需要引入的js <link href="../resource/css/mui.min.css&qu ...

  9. mui上拉刷新

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. leetcood学习笔记-235-二叉搜索树的最近公共祖先

    题目描述: 利用二叉搜索树的特点,如果p.q的值都小于root,说明p q 肯定在root的左子树中:如果p q都大于root,说明肯定在root的右子树中,如果一个在左一个在右 则说明此时的root ...

  2. php 即点即改

    html代码 <td><span id="list_order">{$vo.list_order}</span> </td> < ...

  3. DELPHI 异形窗体

    一定有很多人看到过一些奇形怪状的窗体,例如一些屏幕精灵.其实实现起来非常容易,做到三点就好啦.下面我使用Delphi做了一个VCL控件(TBmpShape),你只需要指定一幅图片就可以将窗体变成你的图 ...

  4. scrt 关闭退格键声音

    options-> session Options -> Terminal -> audio bell (删除勾选) 这样就可以在secureCRT 在出错时不‘滴滴’的响了.

  5. 剑指offer——37复杂链表的复制

    题目描述 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节点引用,否 ...

  6. SpringMVC(day1搭建SpringWebMvc项目)

    MVC和webMVC的区别 Model(模型) 数据模型,提供要展示的数据,因此包含数据和行为,行为是用来处理这些数据的.不过现在一般都分离开来:Value Object(数据) 和 服务层(行为). ...

  7. 20-Ubuntu-文件和目录命令-查看目录树型结构-tree

    tree 以树状图列出当前目录下的文件目录结构 选项 含义 -d 只显示当前目录的子目录树型结构   显示当前目录的子目录和文件树型结构 例: 1.查看文档目录下的子目录和文件树型结构 2.查看文档目 ...

  8. POJ 2763 /// 基于边权的树链剖分

    题目大意: 给定n个结点,有n-1条无向边,给定每条边的边权 两种操作,第一种:求任意两点之间路径的权值和,第二种:修改树上一点的权值. 因为是一棵树,可以直接把 u点和v点间(假设u为父节点,v为子 ...

  9. 【笔记篇】斜率优化dp(一) HNOI2008玩具装箱

    斜率优化dp 本来想直接肝这玩意的结果还是被忽悠着做了两道数论 现在整天浑浑噩噩无心学习甚至都不是太想颓废是不是药丸的表现 各位要知道我就是故意要打删除线并不是因为排版错乱 反正就是一个del标签嘛并 ...

  10. 关于jquery ajax项目总结

    $.ajax({        url:"../action/BorrowAction.php?action=oready",        async:true,//异步请求   ...