MUI上拉刷新效果实现

静态页的DOM结构（格式必须这样写，引入mui的css）

<div id="pullrefresh" class="mui-content mui-scroll-wrapper" class="maincon">
    <div class="mui-scroll">
        <div class="mui-table-view mui-table-view-chevron">
        </div>
    </div>
</div>

下面是js（一定要引入jquery.js以及mui的js）

$(function(){
//上拉加载下拉刷新
    mui.init({
      pullRefresh : {
        container:"#ouye",//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
        up : {
          height:50,//可选.默认50.触发上拉加载拖动距离
          auto:false,//可选,默认false.自动上拉加载一次
          contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
          contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
          callback :pullupRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
       }
   }
});
//加载更多
 var counter = 1;//计数器
 var Flag=true;
 data();
 function data() {
      //业务
      var result = "";
      var byName = decodeURI($.getUrlVar('id'));//
      $.ajax({
           type: 'post',
           url: "/commenc",
           async: false,
           dataType: "json",
           data: {
                 gid:byName,
                 page: counter
           },
           success: function (data) {
            Flag=data.data.data==null||data.data.data==undefined||data.data.data=='';
            if(Flag==false){
                 counter++;
            }
             var nums=data.data.data;
    $.each(data.data.data, function(k,v){
       
           result +='';//请求的内容
        
    });
    jQuery(result).insertBefore('#ouye .mui-scroll .mui-table-view');
   }
  }
 );
}
/**
 * 上拉加载具体业务实现
 */
function pullupRefresh() {
     setTimeout(function () {
          mui('#ouye').pullRefresh().endPullupToRefresh((Flag)); //参数为true代表没有更多数据了。
          data();
     }, 1500);
    }
});