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