1、mui区域滑动无法滑动
官方给出的滑动模块,默认
overflow
不是scroll
,需要重新设置一下,区域就可以滑动了
<div class="mui-scroll-wrapper" style="overflow: scroll;">
<div class="mui-scroll">
<!--这里放置真实显示的DOM内容-->
</div>
</div>
2、mui下拉刷新无法使用(双webView模式)
下拉刷新可能因为缺少一点细节或者模块设置错误都会使用不了
比较重要的便是容器的id
设置,并且需要使用mui-content
以下为使用的正确格式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>test</title>
<script src="../js/mui.min.js"></script>
<link href="../css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
// 下拉刷新
mui.init({
pullRefresh : {
container:"#refreshContainer",//下拉刷新容器标识
down : {
height:50,//触发下拉刷新拖动距离,
auto: false,//首次加载刷新一次
contentdown : "下拉可以刷新",//下拉时刷新标题
contentrefresh : "正在刷新...",//正在刷新时标题
contentmore: ‘刷新完成‘, // 完成后的内容
callback : pulldownRefresh //刷新函数,可以编辑业务;
}
}
});
// callback刷新处理的函数
function pulldownRefresh(){
// 处理延时
setTimeout(function(){
// 结束刷新
mui(‘#refreshContainer‘).pullRefresh().endPulldownToRefresh();
},2000)
}
</script>
</head>
<body>
<div id="refreshContainer" class="mui-content mui-scroll-wrapper" style="overflow: scroll;">
<div class="mui-scroll">
<!-- 具体内容 -->
</div>
</div>
</body>
3、mui下拉刷新a标签无法正常使用
这个因为mui的js代码的问题,官方为了修复safari下拉刷新时偶尔触发整个页面拖动的问题
解决的两种方式解决
(1)通过监听tab点击进行解决
mui(‘body‘).on(‘tap‘,‘a‘,function(){
//事件处理
});
(2)直接删掉这一部分的js即可
找到这一部分js然后删除即可
a.touches&&a.touches.length&&a.touches[0].clientX>30&&a.target&&!this._preventDefaultException(a.target,this.options.preventDefaultException)&&a.preventDefault()