mui-bar-nav底部选项卡怎么用JS代码切换呢
9***@qq.com
- 发布：2025-05-14 16:00
- 更新：2025-11-06 14:32
- 阅读：226
mui-bar-nav底部选项卡怎么用JS代码切换呢
分类：MUI
单开一个index.html页面 然后创建每个底部导航栏对应的文件html 之后在把底部导航栏的html添加到index.html里 通过批量点击事件进行页面显示出来
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../../css/mui.min.css" rel="stylesheet" />
<style type="text/css">
.mui-bar-tab .mui-tab-item.mui-active{
color: crimson;
}
</style>
</head>
<body>
<script src="../../js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" tabindex="0">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" tabindex="1">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话</span>
</a>
<a class="mui-tab-item" tabindex="2">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">邮件</span>
</a>
<a class="mui-tab-item" tabindex="3">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
</body>
<script type="text/javascript">
var page = [
{
id:"home",
url:"home/home.html"
},
{
id:"home",
url:"home/home.html"
},
{
id:"home",
url:"home/home.html"
},
{
id:"home",
url:"home/home.html"
}
]
var pageStyle = {
top:"0",
bottom:"51px"
}
mui.plusReady(function () {
var web = plus.webview.currentWebview()
for (var i = 0; i < page.length; i++) {
var index = plus.webview.create(page[i].url,page[i].id,pageStyle)
index.hide()
a.append(index)
}
plus.webview.show(page[0].id)
})
mui('.mui-bar').on('tap','a',function(){
var index = this.getAttribute("tabindex")
plus.webview.show(page[index].id)
})
</script> </html>
// 这里还有第4个参数 fade-in 可以设置进入的渐显效果时间
var index = plus.webview.create(page[i].url,page[i].id,pageStyle)
