mui 上拉加载 实现分页加载功能

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;
     });
})

复制代码

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值