MUI组件：弹出层组件 - 案例篇

最新推荐文章于 2025-05-21 14:05:38 发布

草巾冒小子

最新推荐文章于 2025-05-21 14:05:38 发布

阅读量1.1w

点赞数

CC 4.0 BY-SA版权

分类专栏： MUI踩坑篇

本文为优快云博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.youkuaiyun.com/qq_35393869/article/details/90604868

MUI踩坑篇专栏收录该内容

30 篇文章

订阅专栏

MUI组件：弹出层组件 - 案例篇

官方组件 · 演示地址：http://dcloud.io/hellomui/examples/actionsheet.html

动画演示 · 效果图：（按“图1”方式点击，就会弹出“图2”）

动画效果暂时省略，代码本地演示，即可查看！

全部代码如下：


<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<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">
		<!--标准mui.css-->
		<link rel="stylesheet" href="static.docs/plugins/mui/css/mui.min.css">
		<style>
			span.mui-icon {
				font-size: 14px;
				color: #007aff;
				margin-left: -15px;
				padding-right: 10px;
			}
			#info {
				padding: 20px 10px;
			}
			/*弹出层：顶部title · 文字居中微调*/
			.paytype-title{padding-left: 30px;font-size: 17px;color: #000;}
			/*付款方式 · 字号设置*/
			.mui-table-view-cell>a:not(.mui-btn){font-size: 16px;color: #333;}
		</style>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">选择支付方式</h1>
		</header>
		<!--<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item" href="#pay_3">
				<span class="mui-icon mui-icon-trash"></span>学习卡
			</a>
			<a class="mui-tab-item" href="#pay_4">
				<span class="mui-icon mui-icon-undo"></span>银行转账
			</a>
		</nav>-->
		<div class="mui-content">
			<div class="mui-content-padded">
				<p>
					<a href="#pay" class="mui-btn mui-btn-blue mui-btn-block" style="padding: 5px 20px;">立即支付</a>
				</p>
				支付方式 · 选择提示：
				<p id="info"></p>
			</div>
		</div>

		<div id="pay_3" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<p class="paytype-title">学习卡<a href="#pay_3" style="float: right;">关闭</a></p>
				</li>
			</ul>
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>卡号</label>
					<input type="text" placeholder="请输入16位卡号">
				</div>
				<div class="mui-input-row">
					<label>密码</label>
					<input type="text" class="mui-input-clear" placeholder="请输入8位密码" data-input-clear="5"><span class="mui-icon mui-icon-clear mui-hidden"></span>
				</div>
			</form>
			<ul class="mui-table-view  font-pay">
				<li class="mui-input-row">
					<label>卡号</label><input type="text" placeholder="请输入16位卡号">
				</li>
				<li class="mui-input-row">
					<label>密码</label><input type="text" class="mui-input-clear" placeholder="请输入8位密码" data-input-clear="5"><span class="mui-icon mui-icon-clear mui-hidden"></span>
				</li>
			</ul>
		</div>
		<div id="pay_4" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<p class="paytype-title">银行转账<a href="#pay_4" style="float: right;">关闭</a></p>
				</li>
			</ul>
			<ul class="mui-table-view  font-pay">
				<li class="mui-table-view-cell">
					<a href="#">开户名称 &nbsp;&nbsp; <span>某某网络科技有限公司</span></a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#">开户账号 &nbsp;&nbsp; <span>11000018320005015</span></a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#">开户银行 &nbsp;&nbsp; <span>中国银行高新区第一支行</span></a>
				</li>
				<li class="mui-table-view-cell">
					<p>支付后请致电：<a href="tel:138052162386">138052162386</a>   请客服人员为您开通</p>
				</li>
			</ul>
		</div>
		<!--   4x 支付方式 · 弹框-->
		<div id="pay" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<p class="paytype-title">选择支付方式<a href="#pay" style="float: right;">关闭</a></p>
				</li>
			</ul>
			<ul class="mui-table-view font-pay">
				<li class="mui-table-view-cell ptys">
					<a href="#">微信支付</a>
				</li>
				<li class="mui-table-view-cell ptys">
					<a href="#">支付宝支付</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#pay_3">学习卡</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#pay_4">银行转账</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#">立即支付</a>
				</li>
			</ul>
		</div>

	</body>
	<script src="static.docs/plugins/mui/js/mui.min.js"></script>
	<script>
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
		mui('body').on('shown', '.mui-popover', function(e) {
			//console.log('shown', e.detail.id);//detail为当前popover元素
		});
		mui('body').on('hidden', '.mui-popover', function(e) {
			//console.log('hidden', e.detail.id);//detail为当前popover元素
		});
		var info = document.getElementById("info");
		mui('body').on('tap', '.mui-popover-action li.ptys>a', function() {
			var a = this,
				parent;
				console.log(a );
			//根据点击按钮，反推当前是哪个actionsheet
			for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
				console.log( parent);
				if (parent.classList.contains('mui-popover-action')) {
					console.log("OK, break!");
					break;
				}
			}
			//关闭actionsheet
			mui('#' + parent.id).popover('toggle');
			info.innerHTML = "你刚点击了\"" + a.innerHTML + "\"按钮";
		})
	</script>

</html>