mui底部选项卡的两种模式

div模式

DIV模式是将所有子页面的内容，分别放置到主页不同的DIV中，当我们点击主页的不同选项卡时，切换不同DIV的显示。 这种方式显然要比加载子页的方式快很多，但是也显然不能承载很多布局的页面，毕竟要在一个主页中写入所有子页面的代码，显得不太现实。

        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">底部选项卡切换(Div模式)</h1>
        </header>
        
        <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item mui-active" href="#page1">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </a>
            <a class="mui-tab-item" href="#page2">
                <span class="mui-icon mui-icon-phone"></span>
                <span class="mui-tab-label">电话</span>
            </a>
            <a class="mui-tab-item" href="#page3">
                <span class="mui-icon mui-icon-email"></span>
                <span class="mui-tab-label">邮件</span>
            </a>
            <a class="mui-tab-item" href="#page4">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">设置</span>
            </a>
        </nav>
        
        
        <div class="mui-content">
            <div id="page1" class="mui-control-content mui-active">
                这是第一个页面
            </div>
            <div id="page2" class="mui-control-content">
                这是第二个页面
            </div>
            <div id="page3" class="mui-control-content">
                这是第三个页面
            </div>
            <div id="page4" class="mui-control-content">
                这是第四个页面
            </div>
        </div>

webview模式

WebView模式则是将所有子页面都写入到不同的子页面中，再通过主页连接到一起，点击不同的选项卡 ，加载不同的子页面，显然这种方式更符合我们的预期和要求。

此模式只能在模拟器和真机上运行，

	<body>
		<div class="mui-content">
		</div>
		<nav id="bar" class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="activity/actlist.html" data-id="task">
				<span class="mui-icon mui-icon-compose"></span>
				<span class="mui-tab-label">待办</span>
			</a>
			<a class="mui-tab-item" href="work.html" data-id="work">
				<span class="mui-icon mui-icon-chatboxes"></span>
				<span class="mui-tab-label">工作</span>
			</a>
			<a class="mui-tab-item" href="my/homepage.html" data-id="mysetting">
				<span class="mui-icon mui-icon-gear-filled"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
	</body>

js部分

	<script src="../js/mui.min.js"></script>
	<script>
		mui.init();
		mui.plusReady(function() {
			var self = plus.webview.currentWebview();
			var current = '';
			var styles = {
				top: '0',
				bottom: '51px'
			};
			var tabsConfig = {
				task: {
					url: 'activity/actlist.html',
					styles: styles,
					default: true
				},
				work: {
					url: 'work.html',
					styles: styles
				},
				mysetting: {
					url: 'my/homepage.html',
					styles: styles
				}
			};
			var tabs = {};
			for (id in tabsConfig) {
				tabs[id] = plus.webview.create(tabsConfig[id].url, id, tabsConfig[id].styles);
				if (tabsConfig[id]['default']) {
					self.append(tabs[id]);
					current = id;
				}
			}
			mui('#bar').on('tap', 'a', function(e) {
				if (current == this.dataset.id) {
					return;
				}
				tabs[this.dataset.id].show();
				tabs[current].hide();
				current = this.dataset.id;
			});
		});
	</script>

demo

参考博客：
MUI框架开发HTML5手机APP(二)–页面跳转传值&底部选项卡切换
一个底部选项卡的实现（webview模式）

posted on 2020-03-07 15:57  君莫問  阅读(45)  评论(0)    收藏  举报

导航