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

        }

})();