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..慢慢一步步走吧。
仅作记录，希望越来越好！。
