您的位置: 首页  >  文章  >  MUI框架：移动端底部固定mui-bar-tab布局 - 案例篇

MUI框架：移动端底部固定mui-bar-tab布局 - 案例篇

分类: 文章 • 2025-03-25 15:02:09

移动端布局：自定义MUI底部tabs选项卡（nav组件 · 底部固定mui-bar-tab） · 案例演示

效果图

MUI框架：移动端底部固定mui-bar-tab布局 - 案例篇

html代码实例 · 如下：


<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>自定义MUI底部tabs选项卡</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="static.docs/plugins/mui/css/mui.min.css" rel="stylesheet" />
		<!--footer-->
		<link href="static.docs/css/public.css" rel="stylesheet" />
		<link href="static.docs/font/iconfont.css" rel="stylesheet" />
	</head>

	<body>
		<!--底部tabs区域-->
		<nav class="mui-bar mui-bar-tab" id="footer">
			<ul class="mui-table-view mui-grid-view">
		       <li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-2 mui-active">
		        	<a href="javascript:;">
	                    <span class="iconfont icon-shouye"></span>
	                    <div class="mui-media-body">首页</div>
		        	</a>
		        </li>
		        <li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-2">
		        	<a href="http://www.gdapjczx.com:80/gdapjc/mobilephone_gd/learning.do">
	                    <span class="iconfont icon-kaoshi"></span>
	                    <div class="mui-media-body">模拟考试</div>
		        	</a>
		        </li>
		        <li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-2" style="text-align: center;overflow: visible;">
		        	<div style="overflow: visible; margin-top: -30px;">
		        		<a class="viplink" href="http://www.gdapjczx.com:80/gdapjc/mobilephone_gd/gopractice.do">
			        		<span class="iconfont  tf-vip"><span class="icon-code">&#xe7af;</span></span>
		                    <div class="mui-media-body vipstudy">VIP学习</div>
			        	</a>
		        	</div>			        	
		        </li>
		        <li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-2">
		        	<a href="http://www.gdapjczx.com:80/gdapjc/mobilephone_pe/gopersonal.do">
	                    <span class="iconfont icon-tiku"></span>
	                    <div class="mui-media-body">全真题库</div>
		        	</a>
		        </li>
		        <li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-2">
		        	<a href="http://www.gdapjczx.com:80/gdapjc/mobilephone_pe/gopersonal.do">
	                    <span class="iconfont icon-gerenzhongxin"></span>
	                    <div class="mui-media-body">个人中心</div>
		        	</a>
		        </li>
			</ul>
		</nav>
		
		
		
		
		<script src="static.docs/plugins/mui/js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</body>

</html>

样式文件 · 代码：


/*底部tabs切换区域*/
/*文字*/
/*#footer .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{color: #333333;}*/
#footer .iconfont{font-size: 24px;font-family:"微软雅黑";color: #333333;}
/*tabs自定义*/
#footer.mui-bar-tab .mui-table-view .mui-table-view-cell .tf-vip{color: #FFF;margin-top:5px;}	
#footer.mui-bar-tab .mui-table-view .mui-table-view-cell.mui-active .iconfont{color: #00c2c2;}		
#footer.mui-bar-tab .mui-table-view .mui-table-view-cell.mui-active .iconfont.tf-vip{color: #FFF;}	
#footer .mui-table-view.mui-grid-view .mui-table-view-cell.mui-active .mui-media-body{color: #00c2c2;}
/*div切换改为a链接*/
#footer .mui-table-view.mui-grid-view{height: 50px;box-sizing: border-box;padding: 0;}
#footer .mui-table-view.mui-grid-view .mui-table-view-cell{margin-right: 0;height: 100%;padding: 8px 0 0;}
#footer .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{margin-top: 0;font-size: 10px;}
/*页面结合微调*/
#footer .mui-table-view-cell:after{height: 0;background: #FFF;}
#footer .mui-table-view.mui-grid-view{margin-bottom: 0;}

.mui-bar.mui-bar-tab {height:50px;background-color: #FFF;-webkit-box-shadow: none;box-shadow: none;}
nav#footer {max-width: 640px;margin: 0 auto;}
/*栅格自定义比例*/
.mui-col-xs-2,.mui-col-sm-2 {width: 20%;}
nav#footer .mui-table-view:before, nav#footer .mui-table-view:after{height: 0;}
.mui-table-view.mui-grid-view .mui-table-view-cell>a:not(.mui-btn){padding: 0;margin: 0;}
.tf-vip{ display: inline-block;width: 40px;height:40px;background: url('../images/icon-vip.png') no-repeat 0 0;background-size: 100% 100%;}
/*vip学习定位*/
.viplink{position: relative;display: inline-block;  width: 50px;height: 50px;border-radius: 50%;background: #FFF;}
.vipstudy{position: absolute;bottom: -15px;left: 0;color: #333;}
.icon-code{padding-top: 10px;display: inline-block;}

也可以带阴影：

MUI框架：移动端底部固定mui-bar-tab布局 - 案例篇

.mui-bar.mui-bar-tab{-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.25);box-shadow: 0 5px 10px rgba(0,0,0,.25);}
.viplink{box-shadow: 0 -0.9px 0.1px rgba(0,0,0,.05);}

以上就是关于“ MUI框架：移动端底部固定mui-bar-tab布局 - 案例篇 ” 的全部内容。

相关推荐