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

底部选项卡被底部小白条遮挡

有的机型底部有一个小白条，所以底部选项卡要有下边距，避免遮挡，具体方法参考：

1. 小程序 safe-area-inset-bottom
2. js判断iPhone X，适配底部被小黑条遮挡问题

开启沉浸式导航后，导航高度在不同机型的显示问题

使用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);
}