mui + hbuilder + h5api模拟弹出支付样式

最新推荐文章于 2021-04-15 17:58:36 发布

原创最新推荐文章于 2021-04-15 17:58:36 发布 · 497 阅读

3 ·

CC 4.0 BY-SA版权

本文详细介绍了一个移动端支付菜单的设计与实现过程，包括使用MUI框架进行布局样式设定，以及支付菜单的交互逻辑，如显示钱包余额、选择支付方式（微信、支付宝），并提供了取消支付的选项。

效果如下：
在这里插入图片描述
不要纠结样式的美丑，功能无比齐全。

<div id="div"></div>
					<div id="popover" class="mui-popover" style="height: 250px;">
						<div class="mui-popover-arrow"></div>
						<ul class="mui-table-view">
							<li class="mui-table-view-cell my_wallet" :id=" pd_money?'kzf_money':'bkzf_money' ">
								<a class="mui-navigate-right" href='#pay'>
									<img src="../img/my_wallet.png" /> 钱包
									<span class="money">￥{{money}}</span>
								</a>
							</li>
							<li class="mui-table-view-cell my_recommend">
								<a class="mui-navigate-right">
									<img src="../img/weixin.png" /> 微信
								</a>
							</li>
							<li class="mui-table-view-cell integral">
								<a class="mui-navigate-right">
									<img src="../img/zfb.png" /> 支付宝
								</a>
							</li>
							<li class="mui-table-view-cell end">
								<a class="mui-navigate-right">
									取消支付
								</a>
							</li>
						</ul>
					</div>

.mui-table-view {
	background: #FFFFFF;
	margin: .25rem auto;
	border-radius: 5px;
	margin-bottom: 0;
}

.mui-table-view-cell {
	line-height: 1.3rem;
}

.mui-navigate-right img {
	display: inline-block;
	width: .4rem;
	margin-right: .5rem;
}

.mui-table-view-cell>a:not(.mui-btn) {
	padding-right: .7rem;
	padding-left: .7rem;
	font-size: .4rem;
	color: #000000;
}

.money {
	color: #fd9309;
	margin-left: 1rem;
}
.end{
	text-align: center;
}

点击支付

//点击支付
mui('.header_right').on('tap', '.header_botton', function() {
				mui("#popover").popover('toggle', document.getElementById("div"));
			})

取消支付弹框

	//点击取消支付
	mui('.mui-table-view').on('tap', '.end', function() {
		mui("#popover").popover('hide');
	})