【01】MUI 仿拼多多商城底部菜单

点击此处：MUI仿拼多多总目录
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/icons-extra.css" rel="stylesheet" />
		<style>
			body {
				background: white;
			}
			
			.mui-bar {
				background: white;
			}
			
			.mui-bar-tab .mui-tab-item.mui-active {
				color: #E02D26;
			}
			 	
			.mui-bar {
				border-top: 1px solid #E0E0E0;
				-webkit-box-shadow: none;
				box-shadow:none;
			}
		</style>
	</head>
	<body>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" data-id="tap-botton-1.html">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" data-id="tap-botton-2.html">
				<span class="mui-icon mui-icon-extra mui-icon-extra-cart"></span>
				<span class="mui-tab-label">购物车</span>
			</a>
			<a class="mui-tab-item" data-id="tap-botton-3.html">
				<span class="mui-icon mui-icon-search"></span>
				<span class="mui-tab-label">搜索</span>
			</a>
			<a class="mui-tab-item" data-id="tap-botton-4.html">
				<span class="mui-icon mui-icon-chat"></span>
				<span class="mui-tab-label">聊天</span>
			</a>
			<a class="mui-tab-item" data-id="tap-botton-5.html">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">个人中心</span>
			</a>
		</nav>

		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init({
				keyEventBind: {
					backbutton: true //开启back按键监听  
				}
			});
			var clickNum = 0;
			mui.back = function(event) {
				clickNum++;
				if(clickNum > 1) {
					plus.runtime.quit();
				} else {
					mui.toast("再按一次退出应用");
				}
				setTimeout(function() {
					clickNum = 0
				}, 2000);
				return false;
			}
			var subpage_style = {
				top: '0px',
				bottom: '51px',
				render: 'always'
			};
			var self = null;
			var activeTab = null;
			mui.plusReady(function() {
				//关闭右滑返回
				plus.webview.currentWebview().setStyle({
					'popGesture': 'none'
				});
				self = plus.webview.currentWebview();
				var sub = plus.webview.create("tab-botton-subpage/tap-botton-1.html", "tap-botton-1.html", subpage_style);
				self.append(sub);
				activeTab = "tap-botton-1.html";

				//选择底部菜单
				mui('.mui-bar-tab').on('tap', 'a', function(e) {
					var targetTab = this.getAttribute('data-id');
					if(targetTab == activeTab) {
						return;
					}
					var _subWv = plus.webview.getWebviewById(targetTab);

					//如果不存在则创建
					if(!_subWv) {
						_subWv = plus.webview.create("tab-botton-subpage/" + targetTab, targetTab, subpage_style);
						self.append(_subWv);
					}
					_subWv.show();
					// 隐藏之前的webview
					plus.webview.getWebviewById(activeTab).hide('none');
					activeTab = targetTab;
				});
			});
		</script>
	</body>
</html>
【01】MUI 仿拼多多 商城底部菜单

猜你喜欢

【01】MUI 仿拼多多商城底部菜单
