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