MUI框架：移动端底部固定mui-bar-tab布局 - 案例篇
2024-05-08 20:15:34
移动端布局：自定义MUI底部tabs选项卡（nav组件 · 底部固定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"></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-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布局 - 案例篇 ” 的全部内容。
MUI框架：移动端底部固定mui-bar-tab布局 - 案例篇相关推荐
- MUI框架：栅格系统 + grid宫格布局 - 案例篇
MUI框架 · 自定义宫格布局 · 应用案例: 通过使用MUI框架的 栅格系统 + grid宫格布局 ,覆盖源码样式,以达到完美的页面效果. 效果图: 点击动画效果不再演示,具体效果参考源码效果! 全 ...
- FrozenUI框架 · 栅格应用：宫格布局 - 案例篇
适用frozenUI框架的栅格系统和多列布局,完成项目首页的宫格布局开发 效果图: demo 代码实例: <!DOCTYPE html> <html><head>& ...
- 前端系列——与众不同的移动端底部固定栏 fixed、absolute 兼容 iOS 和 Android 方案
相信我,我分享的和你在其他博客上看到的终极方案是如此的与众不同! 做过移动端开发的同学,对底部DOM定位出现的各种奇葩情况已经深恶痛绝了吧,底部DOM设置不同的position,在Android和io ...
- 前端系列——与众不同的移动端底部固定栏 fixed、absolute 兼容 iOS 和 Android 方案...
相信我,我分享的和你在其他博客上看到的终极方案是如此的与众不同! 做过移动端开发的同学,对底部DOM定位出现的各种奇葩情况已经深恶痛绝了吧,底部DOM设置不同的position,在Android和io ...
- MUI框架详解-全面讲解MUI框架使用
课程目录: 01MUI 介绍.新项目创建. 基础布局.mp4 02MUI - accordion(折叠面板).button.mp4 03MUI - actionsheet(操作表).badge.mp4 ...
- mui 框架：a标签无法跳转 - 解决篇
解决问题 · 罗列与参考: mui框架导致a标签失效无法点击? mui框架之a标签无法跳转的问题? 关于mui中ul列表需要点击多次生效的问题? mui框架:如何自定义实现a标签点击事件的办法? bu ...
- vue开发移动端，mui框架的各种使用方法
前面提到使用vue开发APP,自己不太熟悉,后来了解到有这个mui框架,然后改变状态栏颜色和监听返回键也是使用的这个框架,后来又遇到了一些问题,但是官网没有写操作方法(也许是没找到),后来在网上找到了 ...
- MUI框架开发HTML5手机APP(二)--页面跳转传值底部选项卡切换
原文链接: 一.MUI加载子页面 1加载子页面详解 在mobile app开发过程中,经常遇到卡头卡尾的页面,也就是说头部和尾部保持不动,而只有中间区域可以滚动,常见的就是新闻列表与详情页等情况: ...
- MUI框架开发HTML5手机APP(一)--搭建第一个手机APP
前 言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用HTML5开发手机APP,而随着手机硬件设备配置的不断提升,各种开发框架的不断优化,也使着H5开发的 ...
最新文章
- Atitit.png 图片不能显示 php环境下
- Vi编辑器中查找替换
- 在MATLAB中读取同一路径下多个txt或mat文件
- 千万级、百万级数据删除优化
- HTML——ASP的 Response.write 方法输出中文乱码解决方案
- jquery对radio的操作汇总
- stl reserve_vector :: reserve（）函数以及C ++ STL中的示例
- 烽火交换机s5800配置说明_如何通过单臂路由实现VLAN间通信？（配置篇）
- STM32学习——中断方式下的发送数据
- 关于equals和==的几个注意点
- hdu2089不要62(数位dp)
- android usb触摸驱动,Linux/Android——usb触摸屏驱动 - usbtouchscreen
- linux下如何实现pgadmin备份,linux下pgAdmin4安装
- ajax get提交中文参数乱码
- chrome 插件--B站自动发弹幕
- 记一次蓝牙音箱无声音的原因
- 三维空间坐标的旋转算法详解_三维空间几何坐标变换矩阵.ppt
- 全网爆火的五款游戏蓝牙耳机，低延迟吃鸡听声辨位毫无压力
- 物联网平台的结构组成有哪些
- C++的File类文件操作（转）