<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>选项卡演示</title>
<link href="css/mui.min.css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<div class="mui-content">
<nav id="bar" class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="tab-main.html" data-id="main">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" href="tab-message.html" data-id="message">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">消息</span>
</a>
<a class="mui-tab-item" href="tab-contact.html" data-id="contact">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">通讯录</span>
</a>
<a class="mui-tab-item" href="tab-setting.html" data-id="setting">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
</div>
<script src="js/mui.min.js"></script>
<script>
mui.init();
var Index=0;
//把子页的路径写在数组里面
var subpages = ['tab-main.html','tab-message.html','tab-contact.html','tab-setting.html'];
//所有的plus-*方法写在mui.plusReady中或者后面。
mui.plusReady(function() {
//获取当前页面所属的Webview窗口对象
var self = plus.webview.currentWebview();
for (var i = 0; i < 3; i++) {
//创建webview子页
var sub = plus.webview.create(
subpages[i], //子页url
subpages[i], //子页id
{
top: '45px',//设置距离顶部的距离
bottom: '50px'//设置距离底部的距离
}
);
//如不是我们设置的默认的子页则隐藏，否则添加到窗口中
if (i != Index) {
sub.hide();
}
//将webview对象填充到窗口
self.append(sub);
}
});
</script>
</body>
</html>
dcharlie
- 发布：2016-07-15 19:57
- 更新：2016-07-15 21:35
- 阅读：1201
根据tabar webview模式的教程怎么还是实现不了一个通用底部导航
分类：MUI
1 个回复
dcharlie (作者)
纯web page所以不能用webview了吗