mui底部导航

﹏ヽ暗。殇╰゛Y 2022-03-16 05:28 291阅读 0赞

在网上找了一个mui的底部导航，用起来还不错，但是已经找不到出处了。

修改了一下之后，原谅我厚脸皮的发个原创了。

用的是自定义的图标，如果不会，可以在我的博客里面找找

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70][]

效果就是这样

测试过，效果还是相当不错的

<!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 rel="stylesheet" type="text/css" href="css/iconfont.css"/>
    	<link rel="stylesheet" type="text/css" href="css/lcs-font.css"/>
    </head>
    <body>
    	<nav class="mui-bar mui-bar-tab">
    		<a class="mui-tab-item mui-active" href="workbench/main.html">
    			<span class="mui-icon iconfont icon-shebeizhuangtai"></span>
    			<span class="mui-tab-label">工作台</span>
    		</a>
    		<a class="mui-tab-item" href="business/main.html">
    			<span class="mui-icon iconfont icon-shujukanban"></span>
    			<span class="mui-tab-label">营业分析</span>
    		</a>
    		<a class="mui-tab-item" href="">
    			<span class="mui-icon iconfont icon-icon_tianjia"></span>
    			<span class="mui-tab-label">收银记账</span>
    		</a>
    		<a class="mui-tab-item" href="inventory/main.html">
    			<span class="mui-icon iconfont icon-icon_baocun"></span>
    			<span class="mui-tab-label">库存管理</span>
    		</a>
    		<a class="mui-tab-item" href="personal/personal.html">
    			<span class="mui-icon iconfont icon-icon_zhanghao"></span>
    			<span class="mui-tab-label">我的</span>
    		</a>
    	</nav>
    	<script src="js/mui.min.js"></script>
    	<script type="text/javascript" charset="utf-8">
    	
    			mui.init();
    			var index = 0;
    			//subpages 就是装页面路径的
    			var subpages = ["workbench/main.html",
    				"business/main.html",
    				"",
    				"inventory/main.html",
    				"personal/personal.html"];
    			
    			//因为用的是plus 所以在pc端是无法运行的，只能在手机看效果
    			mui.plusReady(function () {
    				//获取当前页面所属的Webview窗口对象
    			    var self = plus.webview.currentWebview();
    					for (var i = 0; i < subpages.length; i++) {
    						//加载页面
    						var sub = plus.webview.create(
    						subpages[i], subpages[i], {
    							top: '0px',
    							bottom: '50px'
    						});
    						if(i > index){
    							sub.hide();
    						}
    						//添加
    						self.append(sub);
    					}
    					
                		var backButtonPress = 0;
    					mui.back = function(event) {
    						backButtonPress++;
    						if (backButtonPress > 1) {
    							plus.runtime.quit();
    						} else {
    							plus.nativeUI.toast('再按一次退出应用');
    						}
    						setTimeout(function() {
    							backButtonPress = 0;
    						}, 1000);
    						return false;
    					};
    			});
    			var activeTab = subpages[index];
    			mui('.mui-bar-tab').on('tap', 'a', function (){
    				var targetTab = this.getAttribute('href');
    				if(activeTab == targetTab){
    					//这里是 点击相同导航，不作处理 ，直接跳出
    					return;
    				}
    				if(mui.os.plus && "" != targetTab){
    					//这里就是 显示 隐藏
    					plus.webview.show(targetTab);
    					plus.webview.hide(activeTab);
    					activeTab = targetTab;
    				} else if("" != targetTab){
    					//这里就是 添加页面
    					createIframe('.mui-content', {
    						url: targetTab,
    						style: {
    							top: '0px',
    							bottom: '50px'
    						}
    					})
    				}else{
    					//这里是因为页面 中间的 是调到字页面所以 当 targetTab 是空的时候就直接跳转页面
    					mui.openWindow({
                            url: "workbench/cashier.html",
                            id: "cashier"
                    	});
    				}
    			});
    			function createIframe(el,opt) {
    				//获取元素
    				var elContainer = document.querySelector('mui-content');
    				var wrapper = document.querySelector('.mui-iframe-wrapper');
    				
    				if(!wrapper){
    					//如果没有，开始创建
    					wrapper = document.createElement('div');
    					wrapper.className = 'mui-iframe-wrapper';
    					for (var i in opt.style) {
    						wrapper[i] = opt.style[i];
    					}
    				}	
    				//设置url id 然后添加
    				var iframe = document.createElement('iframe');
    				iframe.src = opt.url;
    				iframe.id = opt.id || opt.url;
    				iframe.name = opt.id;
    				wrapper.appendChild(iframe);
    				elContainer.appendChild(wrapper);
    			}
    	</script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70]: /images/20220316/489f59e64b5e43d7a53565627bd51168.png