mui的上拉下载和下拉刷新

head部分(引入mui)

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

html部分(scroll容器)

<div class="mui-off-canvas-wrap mui-draggable mui-slide-in emergeBody">
  <div class="mui-inner-wrap">
    <!-- 主页面内容容器 -->
   <div class="mui-scroll-wrapper" id='emergeData'>
      <div class="mui-scroll">
            <!--页面主体开始-->
            <div class="mui-page">
                <div id='emergeList'><!-- 告警列表页 --></div>
                <div id="pageadd" class="mui-button-row mui-table-view button_box">上拉显示更多</div>
            </div>
      </div>
      </div>
  </div>
</div>

js部分(...)

window.onload = function(){
　　var pageSize = 6;//每次返回的数据条数
    var isOver = false;//是否加载完
    var startLimit = 1;//每次传入后台的页码，比如123
    var txt = "";//可忽略
    mui.init({
     pullRefresh: {
         container: "#emergeData",//承载的容器
         down: {    //下拉刷新
             callback: function(){
                 setTimeout(function(){
                     mui("#emergeData").pullRefresh().endPulldownToRefresh(isOver); //refresh completed
                     emergeListDownData();//下拉刷新函数
                 }, 500);
             }
         },
        up: {    //上拉加载
             height:100,
             callback: function(some){
                 setTimeout(function(){
                      emergeListUpData();//上拉加载函数
                     mui("#emergeData").pullRefresh().endPullupToRefresh(isOver);//结束上拉加载
                 },100);
             }
         }
     }
    });
}

下拉刷新:emergeListDownData()

function emergeListDownData(){//下拉刷新
    $.loadingShow();//显示加载中...  可忽略
    var urlValue = $.getUrlParam('urlvalue');//获取url参数
    document.querySelector(".mui-pull-bottom-pocket").style.opacity=0;//隐藏mui自带 '加载更多'字体（自己添加的"上拉加载更多"）
        $.alarmData.emergeListPage.param.cuurrentpage = 1;//每次刷新，传递给后台 1 表示需要的是第一页的最新的数据（分页是后台做的）
        $.alarmData.emergeListPage.param.level = urlValue;//传递的参数
        $.buslongAjax({//项目封装的ajax方法，可以用ajax即可
            url:$.alarmData.emergeListPage.url,
            data:$.alarmData.emergeListPage.param,
            success : function(data) {
                $("#emergeBody").setAllValue(data);//封装的方法，可忽略
                var pageCount = Math.ceil(Number(data.count)/Number(pageSize));//页数总页:data.count后台传递的总条数/每页显示的数据
　　　　　　　　　　//判断是否有数据
                if(data.ReporterStatus.length != 0 && startLimit <= pageCount){//有数据
                    $("#emergeList").html("");//添加之前先清空内容
                    $("#pageadd").text("上拉显示更多");//按钮更新内容（这就是我为什么隐藏mui自带的‘加载更多’）
                    emergeDomApend("emergeList",data.ReporterStatus);//添加的数据
                    setTimeout(function() {
                        mui("#emergeData").pullRefresh().enablePullupToRefresh();//启用上拉加载
                    }, 200);//200毫秒后 启动上拉加载
                }else{//无数据
                    $("#pageadd").text("暂时没有更多数据");
                    setTimeout(function() {
                        startLimit = 1;
                        mui("#emergeData").pullRefresh().disablePullupToRefresh();//停止上拉加载
                    },100);//更新页码为 1 并停止上拉加载
                }
            },
            error: function(err){
                  console.log("请求失败!!！" + err);
                  $("#pageadd").text("数据为空，请更新条件重试!");
                  return;
               },
        });
    }

上拉加载:emergeListUpData()

function emergeListUpData(){//上拉加载
    　　$.loadingShow();//可忽略
    　　var urlValue = $.getUrlParam('urlvalue');
    　　startLimit++;//每次加载 页码就增加一次
    　　$.alarmData.emergeListPage.param.cuurrentpage = startLimit;//传给后台的数据，可忽略
    　　$.alarmData.emergeListPage.param.level = urlValue;//传给后台的数据，可忽略
        $.buslongAjax({
            url:$.alarmData.emergeListPage.url,
            data:$.alarmData.emergeListPage.param,
            success : function(data) {
                var pageCount = Math.ceil(Number(data.count)/Number(pageSize));//总页数
                if(data.ReporterStatus.length != 0 && startLimit <= pageCount){//传入的参数  小于等于总页数，则加载新数据 
                    emergeDomApend("emergeList",data.ReporterStatus);//加载数据
                }else{
                    setTimeout(function() {//否则停止上拉加载
                        $("#pageadd").text("暂时没有更多数据");
                        startLimit = 1;
                        mui("#emergeData").pullRefresh().disablePullupToRefresh();//停止上拉加载
                    },100);
                }
                
                if(startLimit >2){ //当页码大于2时候，出现 ‘回到顶部’ 按钮 , 可根据自己情况设置(黄色部分是区分打包app的,不是打包app可删除忽略)
                    $("#toTop").css({"display":"block"});
　　　　　　　　　　　　//在这里需要注意一下，因为我这边的项目app，是嵌套在app内部的手机端，算是手机端网页吧。不是独立打包发行的那种app,所以对于安卓和ios没有区分
　　　　　　　　　　　　//所以我直接以下,兼容安卓和ios系统：

　　　　　　　　   　　　　　　document.getElementById('emergeData').addEventListener('scroll', function() {
                              if (mui('#emergeData').pullRefresh().y <= window.innerHeight * (-1) && scrollToTopBox.classList.contains('hide')){ 
                                  scrollToTopBox.classList.remove('hide');} 
                              else if (mui('#emergeData').pullRefresh().y > window.innerHeight * (-1) && !scrollToTopBox.classList.contains('hide')){ 
                                  scrollToTopBox.classList.add('hide');}
                              });
　　　　　　　　　　　　//如果是打包app,则需要区分,以下：Android上监听原生滚动，iOS上监听div滚动，上拉超过一屏后显示按钮，否则隐藏

 　　　　　　　　　　if (mui.os.android) {//打包app 可解决兼容性问题 
　　　　　　　　　　　　window.addEventListener('scroll', function(e) { 
　　　　　　　　　　　　　　if (window.pageYOffset <= window.innerHeight && scrollToTopBox.classList.contains('hide')){ scrollToTopBox.classList.add('hide');}
 　　　　　　　　　　　　　　else if (window.pageYOffset > window.innerHeight && !scrollToTopBox.classList.contains('hide')){ 
　　　　　　　　　　　　　　　scrollToTopBox.classList.remove('hide');} }); 
　　　　　　　　　　} else {
　　　　　　　　　　　　　　document.getElementById('emergeData').addEventListener('scroll', function() { 
　　　　　　　　　　　　　　if (mui('#emergeData').pullRefresh().y <= window.innerHeight * (-1) && scrollToTopBox.classList.contains('hide')){ 
　　　　　　　　　　　　　　　　scrollToTopBox.classList.remove('hide');
　　　　　　　　　　　　　　} else if (mui('#emergeData').pullRefresh().y > window.innerHeight * (-1) && !scrollToTopBox.classList.contains('hide')){ 
　　　　　　　　　　　　　　　　scrollToTopBox.classList.add('hide');} }); 
　　　　　　　　　　} 

　　　　　　　　　　var scrollToTopBox = document.getElementById('toTop'); //返回按钮tap  
　　　　　　　　　　scrollToTopBox.addEventListener('tap', function(e) { e.stopPropagation(); mui("#emergeData").pullRefresh().scrollTo(0, 0, 1000);//滚动到顶部   }); 

　　　　　　　　}else{ 
　　　　　　　　　　$("#toTop").css({"display":"none"}); 
　　　　　　　　　} 
　　　　　　}, 
　　　　　error: function(XMLHttpRequest, textStatus, errorThrown){ 
　　　　　　　　console.log("请求失败!!！" + textStatus,errorThrown);
　　　　　　　　$("#pageadd").text("数据为空，请更新条件重试!"); 
　　　　　　　　return; 
　　　　　　}, 
　　　　}); 
}

emmm......录了视频，但是好像不能上传

emmm...这个是使劲儿下拉的。。。算啦，就不贴视频和更多图片啦

总之，mui的上拉下拉还是挺好用的。。但是缺陷也有，坑也比较多，也百度了很多资料，em..慢慢一步步走吧。

 仅作记录，希望越来越好！。