Android嵌套H5 MUI使用小结

最新推荐文章于 2021-11-13 23:55:00 发布

原创最新推荐文章于 2021-11-13 23:55:00 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#mui事件冲突 #mui确认框样式

前端框架使用小结专栏收录该内容

3 篇文章

订阅专栏

本文探讨了在安卓项目中嵌套H5并使用MUI框架时遇到的问题，包括确认框按钮样式重写导致事件不触发，折叠面板多层嵌套在加载时填充数据无法收缩，以及动态生成多层折叠面板的自定义事件冲突和参数传递问题，并提供了相应的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在安卓项目中嵌套了h5，再h5中使用了mui 框架，在使用途中遇到几个有意思的小问题再次记录一下。

1、确认框 button样式重写，事件不触发。

2、折叠面板多层嵌套，如果在加载时就把数据填充将在第三层时不能收缩。

3、js动态生成多层折叠面板，自定义事件冲突和参数传递。

效果图如下：

以下是代码实现，如有小伙伴遇到，可以此作为参考。

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>DEMO</title>
		<meta charset="utf-8" />
	    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="Cache-Control" content="no-store, must-revalidate">
		<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
		<script type="text/javascript" src="./scripts/jquery-1.12.4.min.js"></script>
		<script src="Scripts/mui.min.js"></script>

		<!--标准mui.css-->
		<link rel="stylesheet" href="./css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="./css/app.css" />
		<link rel="stylesheet" type="text/css" href="./Font-Awesome-3.2.1/css/font-awesome.css" />

		<style type="text/css">
			.tipBtn {
				width: 40%;
				background-color: #4a94df;
				color: #fff;
				border-radius: 20px;
				height: 30px;
				margin: 3%;
			}
			.liContent{
				font-size: 11px;
			}
		</style>
	</head>
	<body>
		<div class="app-page">
			<div class="app-header">
				<div class="auth-title">MUI 事件重写</div>
			</div>
			<div class="app-content" style="padding: 20px 15px 0 15px">
				<div>1、项目中使用MUI框架，弹框button样式统一 需重写样式并重写点击事件；</div>
				<div>2、js动态生成折叠面板中多层嵌套 需重写内层面板展开事件；</div>
				<div>3、js折叠面板中自定义点击事件冲突 需重写监听自定义点击事件；</div>
				<div style="padding-top: 20px;text-align: center;">
					<button class="app-btn" onclick="setData()">弹出框</button>
					<button class="app-btn" onclick="getData()">生成折叠面板</button>
				</div>

				<div style="padding-top: 50px;" id="dymAccordion">
				</div>
			</div>
		</div>

		<script type="text/javascript">
			//绑定确认框点击事件
			mui('body').on('tap', '#confirmBtn', function() {
				mui.trigger(document.querySelector('.mui-popup-button-bold'), 'tap');
			});
			mui('body').on('tap', '#cancleBtn', function() {
				mui.trigger(document.querySelector('.mui-popup-button'), 'tap');
			});

			function setData() {
				var btnArray = ['<button class="tipBtn" id="cancleBtn" style="width:60%; font-size:12px;">重新选择</button>',
					'<button class="tipBtn" id="confirmBtn" style="width:60%;font-size:12px;">确认投票</button>'
				];
				mui.confirm('确认投票吗?<br>投票后不可更改哦', ' ', btnArray, function(e) {
					var index = e.index;
					if (index == -1 || index == 0) return; //未获取的点击事件或点击取消
					if (index == 1) {
						//TODO 确认后的逻辑
					}
				});
			}

			$('li').bind('click', function() {
				$(this).addClass('mui-active');
				$('li').not($(this)).removeClass('mui-active'); <!--on是你的样式名-->
			});
			var htmlTxt = '';
			function getData(){
				var id='hoage1';//以此代替循环
				htmlTxt = '';
				htmlTxt +='<ul class="mui-table-view">'
					htmlTxt +='<li class="mui-table-view-cell mui-collapse">'
						htmlTxt +='<a class="mui-navigate-right" href="#">第一层</a>'
						htmlTxt +='<ul class="mui-table-view">'
							htmlTxt +='<li class="mui-table-view-cell mui-collapse">'
								htmlTxt +='<a class="mui-navigate-right defineCls" href="#" data-value="hao123" data-id="'+id+'">第二层</a>'
								htmlTxt +='<div id="'+id+'"></div>'
							htmlTxt +='</li>'
						htmlTxt +='</ul>'
					htmlTxt +='</li>'
				htmlTxt +='</ul>';
				
				mui('body').on('tap', '.defineCls', function(e) {
					var value = this.getAttribute("data-value");
					var id = this.getAttribute("data-id");
					getDefineData(value,id);
				});
				
				document.getElementById('dymAccordion').innerHTML = htmlTxt;
			}
			
			//模拟点击后请求数据 并加载到当前点击的 li 标签下
			function getDefineData(value,id){
				htmlTxt ='';
				var innerTxt = document.getElementById(''+id+'').innerHTML;
				if(innerTxt !==""){
					document.getElementById(''+id+'').innerHTML = htmlTxt;
					return;
				}
				htmlTxt += '<ul>';
				htmlTxt +=
					'<li><div class="liContent">城市花园二期5号楼1单元1层1号&nbsp;<span style="color:#F14E41">未投</span></div></li/>'
				htmlTxt +=
					'<li><div class="liContent">城市花园二期5号楼1单元2层2号&nbsp;<span style="color:#F14E41">未投</span></div></li/>'
				htmlTxt +=
					'<li><div class="liContent">城市花园二期5号楼1单元1层11号&nbsp;<span style="color:#2AC845">已投</span></div></li/>'
				htmlTxt += '</ul>';
				document.getElementById(''+id+'').innerHTML = htmlTxt;
				var x = $('#' + id + '').offset().top;
				var y = document.body.offsetHeight;
				if (x / y <= 2) { //渲染超过两页或者三页的数据
					$('html,body').animate({
						scrollTop: 0
					}, 'slow');
				} else if (x / y < 2) {
					$('html,body').animate({
						scrollTop: y
					}, 'slow');
				} else if (x / y < 3) {
					$('html,body').animate({
						scrollTop: 2 * y
					}, 'slow');
				} else if (x / y < 4) {
					$('html,body').animate({
						scrollTop: 3 * y
					}, 'slow');
				}
			}
		</script>
	</body>
</html>