MUI框架开发app中出现的问题
mui如何增加自定义icon图标
参考:https://ask.dcloud.net.cn/article/128
5+APP在ios上禁止侧滑返回
问题:在5+APP项目中,在ios平台上用户登陆之后进入主页index,但仍可侧滑返回登陆注册
解决方案:关闭苹果手机侧滑功能,当然安卓手机上也会同步关闭,可以判断运行系统区别,必须写在plusReady之后。
mui.plusReady(function() {
var wv=plus.webview.currentWebview();
// 关闭侧滑返回功能
wv.setStyle({'popGesture':'none'});
});
参考:https://ask.dcloud.net.cn/article/102
底部选项卡被底部小白条遮挡
有的机型底部有一个小白条,所以底部选项卡要有下边距,避免遮挡,具体方法参考:
开启沉浸式导航后,导航高度在不同机型的显示问题
使用MUI框架开发APP,开启沉浸式导航以后,我们导航要留足状态栏的高度距离,但是在不同的机型下,状态栏的高度是不一样的,所以我们要获取状态栏的高度,动态修改导航的上偏移量。
首先,如果开启了沉浸式导航,就要获取状态栏的高度,导航栏的整体高度为自身高度加上状态栏高度,上边距为状态栏高度。内容区的上边距为导航的整体高度。
具体步骤参考:MUI 启用沉浸式&header显示问题
在iPhone手机底部出现白色条
在页面添加样式:
html,
body {
position: relative;
z-index: 99999;
height: 100vh;
}
设置应用默认侧滑返回关闭Webview窗口
manifest.json文件中添加:
"plus" : {
"popGesture": "close", //设置应用默认侧滑返回关闭Webview窗口,"none"为无侧滑返回功能,"hide"为侧滑隐藏Webview窗口。参考https://ask.dcloud.net.cn/article/102
}
修改状态栏背景颜色
在需要修改的状态栏颜色的前一个页面引入MUI H5模板的common.js
// 点击跳转到修改密码页,并修改状态栏颜色
onForget(){
let wn=clicked('pages/forget_password/forget_password.html');
let bstyle=plus.navigator.getStatusBarStyle();
wn.addEventListener('close',function(){
//页面关闭后状态栏重置回以前的样式
plus.navigator.setStatusBarStyle(bstyle);
},false);
},
在需要修改状态栏颜色的页面修改状态栏颜色。
mui.plusReady(function() {
plus.navigator.setStatusBarStyle('dark');
})
区域滚动,双击滑回顶部
启用双击监听
mui.init({
swipeBack: true ,//启用右滑关闭功能
gestureConfig: {
doubletap: true//启用双击监听
},
});
手动初始化scroll控件,一定要初始化,不然没效果
mui.plusReady(function() {
// 手动初始化scroll控件
initScroll(false);
})
初始化下拉滚动函数
//初始化下拉滚动
let scrollTool;
function initScroll(flag = true) {
setTimeout(function() {
scrollTool = mui('.mui-scroll-wrapper').scroll({
scrollY: true, //是否竖向滚动
scrollX: false, //是否横向滚动
startX: 0, //初始化时滚动至x
startY: 0, //初始化时滚动至y
indicators: false, //是否显示滚动条
deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
bounce: flag //是否启用回弹
});
}, 300);
}
触发代码关键词:ms
初始滚动DOM结构
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!--这里放置真实显示的DOM内容-->
</div>
</div>
双击标题栏滑回顶部:@doubletap=“scrollToTop()”,触发代码关键词:mh
<header @doubletap="scrollToTop()" class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left"></a>
<h1 class="mui-title">标题</h1>
<a class="mui-btn mui-btn-link mui-pull-right">保存</a>
</header>
滑回顶部通用方法
//滚动到顶部
function scrollToTop() {
setTimeout(function() {
mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);//100毫秒滚动到顶
},500);
}