MUI tab-bar 进行页面跳转

最新推荐文章于 2021-07-09 16:57:26 发布

goodtimedd

最新推荐文章于 2021-07-09 16:57:26 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/goodtimedd/article/details/107190723

本文详细介绍如何使用MUI框架组件化方式搭建底部导航栏，包括HTML结构设置、JS操作及子页面路径绑定，实现底部选项卡切换效果。

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

MUI组件化官网

快捷编辑选择底部选项卡进行快速搭建底部导航

<div class="mui-content">
	    <!--一, 子页面内容部分-->
	    <div id="main-content"></div>
	    <!--二, 底部选项卡-->
	    <nav class="mui-bar mui-bar-tab"  id="tabBar">
	        <a class="mui-tab-item mui-active" id="home.html">
	            <span class="mui-icon mui-icon-home"></span>
	            <span class="mui-tab-label">首页</span>
	        </a>
	        <a class="mui-tab-item" id="group.html">
	            <span class="mui-icon mui-icon-phone"></span>
	            <span class="mui-tab-label">分类</span>
	        </a>
	        <a class="mui-tab-item" id="cart.html">
	            <span class="mui-icon mui-icon-email"></span>
	            <span class="mui-tab-label">购物车</span>
	        </a>
	        <a class="mui-tab-item" id="main.html">
	            <span class="mui-icon mui-icon-gear"></span>
	            <span class="mui-tab-label">我的</span>
	        </a>
	    </nav>
	</div>

搭建完成开始js的操作
a标签绑定的所有路径都需要你自己来建立子页面

<script type="text/javascript" charset="utf-8">
  	mui.init({
  		subpages:[
  		{
  			url:'home.html',
  			id:'home.html',
  			styles:{
  				top:'0',//mui标题栏默认高度为45px；
  				bottom:'50px'//默认为0px，可不定义；
  			}
	    },
  		{
  			url: 'group.html',
	        id: 'group.html',
	        styles: {top: '0',bottom: '50px'}
	    },
	    {
	        url: 'cart.html',
	        id: 'cart.html',
	        styles: {top: '0',bottom: '50px'}
	    },
	    {
	        url: 'main.html',
	        id: 'main.html',
	        styles: {top: '0',bottom: '50px'}
	    }]
  	});

url 是你子页面的路径
id 用来标识所选的页面
styles 是当前页面导航的位置

/ 将 home 作为第一个界面
	mui.plusReady(function(){
		var view = plus.webview.getWebviewById('home.html');
		view.show();
	})

view.show()渲染所选中的页面

// tab 选项卡绑定点击事件
	mui("#tabBar").on('tap', 'a', function(e) {
		var id = this.getAttribute('id');
		var view = plus.webview.getWebviewById(id);
		view.show();
	});

点击谁谁渲染

// 如果一开始不显示首页的话, 使用以下代码
	function plusReady(){
		window.addEventListener('homeReady', function() {
			var view = plus.webview.getWebviewById('home.html');
			view.show();
		});
	}
	if (window.plus) {
		plusReady()
	} else{
		document.addEventListener('plusready',plusReady,false);
	}

做兼容的处理兼容问题