mui顶部nav导航栏代码

原创于 2023-03-16 09:29:33 发布 · 675 阅读

CC 4.0 BY-SA版权

文章标签：

文章介绍了MUI中固定栏的使用注意事项，特别是.mui-bar类别的元素，如顶部导航栏(.mui-bar-nav)、底部工具条(.mui-bar-footer)和底部选项卡(.mui-bar-tab)，这些都需要放在.mui-content元素之前以防止遮挡内容。同时，文章提供了顶部导航栏的HTML示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

MUI注意事项连接：http://ask.dcloud.net.cn/article/122

最近搞这个手机端的东西,我很久没写原生js了,都手生疏了,而且这个mui真的是第一次听,哎~~~~~~~

固定栏靠前

所谓的固定栏，也就是带有.mui-bar属性的节点，都是基于fixed定位的元素；

常见组件包括：顶部导航栏（.mui-bar-nav）、底部工具条(.mui-bar-footer)、底部选项卡（.mui-bar-tab）

元素使用时需遵循一个规则：放在.mui-content元素之前，即使是底部工具条和底部选项卡，也要放在.mui-content之前，否则固定栏会遮住部分主内容；

顶部导航栏（.mui-bar-nav）

<header class="mui-bar mui-bar-nav mui-bar-nav-bg">
   <!--  左边  -->   
   <a id="icon-menu" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
   <!-- 右边 -->
   <a class="mui-action-back mui-icon mui-icon-home mui-pull-right mui-a-color"></a>
   <!-- 标题 -->
   <h1 class="mui-title">标题文字</h1>
</header>