mui 上拉加載

最近做到移動端頁面的開發，需要mui 的上拉刷新功能，最后實現后整理代碼如下：

1、需要引入的js

<link href="../resource/css/mui.min.css" rel="stylesheet" />
<script src="../resource/js/jquery-1.8.1.js" type="text/javascript" charset="utf-8"></script>
<script src="../resource/js/mui.min.js"></script>

2、dom結構

<div class="mui-content" id="goodsList">           
    <div class="mui-scroll">
        <div  class="mui-table-view mui-table-view-chevron">
        </div>
    </div>
</div>

3、動態獲取數據，實現上拉加載

//動態添加的Input組件需要重新進行初始化
//mui('.mui-input-row input').input();

//獲取列表全部數據
(function(){

var pageNum;//總條數
var pageSize = 20//每頁顯示的條數
var pageStart = 0;//當前頁碼
var counter = 1;//刷新次數
var Flag = true;
getAllGoodslist();//指定 某一頁顯示某幾頁
function getAllGoodslist(pageStart,pageSize){
    var result="";
                  $.ajax({
                      url:"transport_showList",
                      type:'get',
                      dataType:'json',
                      timeout:10000,
                      data:{
                          startPage:counter,
                          length:20
                      },
                      error:function(data){
                          alert("error");
                      },
                      success:function(data){
                          console.log(data);
                        //判斷是否有返回值 當沒有返回值的時候就為空，則代表沒有更多數據了
                          Flag=data[0].cargoName==null||data[0].cargoName==undefined||data[0].dcargoName=='';
                          if(Flag == false){
                              counter++;
                              console.log(counter);
                          }
                          $.each(data,function(i,value){
                              result += '<div class="mui-card" id='+value.transportInfoId+'>'
                                      + '<div class="mui-card-header mui-card-media orange">'
                                      +'<span class="mui-icon iconfont icon-huowu"></span>&nbsp;&nbsp;'
                                      +'<span id="cargoName">'+value.cargoName+'</span>'
                                      +'</div>'                            
                                      +'<div class="mui-card-content">'
                                      +'<span class="mui-icon iconfont icon-weizhi green"></span>&nbsp;&nbsp;'
                                      +'<span id="sshen">'+value.startprovince+'</span>'
                                      +'<span id="sshi">'+value.startcity+'</span>'
                                      +'<span id="sxian">'+value.startdistrict+'</span>'
                                      +'</div>'
                                      +'<div class="mui-card-footer" id="stripGoodsList">'
                                      +'<span class="mui-icon iconfont icon-weizhi orange"></span>&nbsp;&nbsp;'
                                      +'<span id="eshen">'+value.endprovince+'</span>'
                                      +'<span id="eshi">'+value.endcity+'</span>'
                                      +'<span id="exian">'+value.enddistrict+'</span>'
                                      +'</div>'
                                      +'<div class="hr1 hr1Address"></div>'
                                      +'<div><a class="goodsInfo green" href="#">詳情</a><span class="time">'+value.time+'</span></div>'
                                      +'</div>';
                          })                                                                           
                                 jQuery(result).insertBefore('#goodsList .mui-scroll .mui-table-view');                        
                      }
                       
            })                                        
}
//上拉加載數據
mui.init({
      pullRefresh : {
        container:"#goodsList",//待刷新區域標識，querySelector能定位的css選擇器均可，比如：id、.class等
        up : {
          height:50,//可選.默認50.觸發上拉加載拖動距離
          auto:false,//可選,默認false.自動上拉加載一次
          contentrefresh : "正在加載...",//可選，正在加載狀態時，上拉加載控件上顯示的標題內容
          contentnomore:'沒有更多數據了',//可選，請求完畢若沒有更多數據時顯示的提醒內容；
          callback : pullupRefresh //必選，刷新函數，根據具體業務來編寫，比如通過ajax從服務器獲取新數據；
        }
      }
});

function pullupRefresh() {
    setTimeout(function () {
          mui('#goodsList').pullRefresh().endPullupToRefresh((Flag)); //參數為true代表沒有更多數據了。
          getAllGoodslist();
         }, 1500);
        }
})();