mui tab bar 顶部+底部

最新推荐文章于 2023-07-16 19:06:01 发布

kangkang_style

最新推荐文章于 2023-07-16 19:06:01 发布

阅读量1w

点赞数

分类专栏： mui 文章标签： tab bar 顶部底部

本文链接：https://blog.csdn.net/kangkang_style/article/details/79378524

版权

本文介绍了使用mui实现移动端顶部和底部选项卡的多种模式，包括底部选项卡+div模式，底部选项卡+二级菜单，以及顶部选项卡的div和可左右拖动的模式。针对复杂业务系统，文章提到了DOM结构繁杂可能导致的性能问题，并建议使用webview模式以提高响应速度。核心代码示例展示了不同模式的实现方法。

摘要由CSDN通过智能技术生成

底部选项卡+div模式

通过DIV模拟一个独立页面，通过DIV的显示、隐藏模拟不同页面的切换，典型的SPA模式；这种模式适合简单业务系统，因为每个选项卡内容要写在一个DIV中，若逻辑复杂，会导致当前页面DOM结构繁杂，造成webview响应缓慢，甚至崩溃；因此若系统较复杂，需要下拉刷新等操作，推荐使用webview模式的选项卡；

核心代码：

<nav class="mui-bar mui-bar-tab">
	<a class="mui-tab-item mui-active" href="#tabbar">
		<span class="mui-icon mui-icon-home"></span>
		<span class="mui-tab-label">首页</span>
	</a>
	<a class="mui-tab-item" href="#tabbar-with-chat">
		<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
		<span class="mui-tab-label">消息</span>
	</a>
	<a class="mui-tab-item" href="#tabbar-with-contact">
		<span class="mui-icon mui-icon-contact"></span>
		<span class="mui-tab-label">通讯录</span>
	</a>
	<a class="mui-tab-item" href="#tabbar-with-map">
		<span class="mui-icon mui-icon-gear"></span>
		<span class="mui-tab-label">设置</span>
	</a>
</nav>

<div class="mui-content">
	<div id="tabbar" class="mui-control-content mui-active">
	<div class="title">这是div模式选项卡中的第1个子页面.</div>
	<div class="title">何谓div模式的选项卡？
		其实就是通过DIV模拟一个独立页面，通过DIV的显示、隐藏模拟不同页面的切换，典型的SPA模式；</div>
	<div class="title">
		这种模式适合简单业务系统，因为每个选项卡内容要写在一个DIV中，
		若逻辑复杂，会导致当前页面DOM结构繁杂&