mui 上拉加载

时间：2022-05-24  编辑：

最近做到移动端页面的开发，需要mui 的上拉刷新功能，最后实现后整理代码如下：

1、需要引入的js

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