mui-bar-nav底部选项卡怎么用JS代码切换呢
9***@qq.com
- 发布：2025-05-14 16:00
- 更新：2026-01-05 13:40
- 阅读：306
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)
index.html页面代码
<!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" />
<link href="css/mui.min.css" rel="stylesheet" />
<title></title>
<link rel="stylesheet" href="css/mui.min.css">
</head>
<body>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" data-page="list.html">
<span class="mui-icon mui-icon-list"></span>
<span class="mui-tab-label">列表</span>
</a>
<a class="mui-tab-item" data-page="my.html">
<span class="mui-icon mui-icon-map"></span>
<span class="mui-tab-label">我的</span>
</a>
</nav>
<script src="js/mui.min.js"></script>
<script>
mui.init();
// 存储已创建的webview，避免重复创建
let webviews = {}
// 当前激活的webview
let currentWebview = null
// 等待plus ready（5+ API必须在ready后调用）
mui.plusReady(function() {
// 初始化默认显示首页
createWebview('device_list.html').show()
// 绑定Tab点击事件
mui('.mui-bar-tab').on('tap', '.mui-tab-item', function() {
let targetPage = this.getAttribute('data-page')
// 切换Tab
switchTab(targetPage)
// 更新Tab选中状态
mui('.mui-bar-tab .mui-active')[0].classList.remove('mui-active')
this.classList.add('mui-active')
})
})
/**
* 创建webview
* @param {string} pageUrl 页面路径
*/
function createWebview(pageUrl) {
if (!webviews[pageUrl]) {
// 创建webview，设置样式（铺满屏幕，避开底部Tab）
let wv = plus.webview.create(
pageUrl, // 页面路径
pageUrl, // webview标识
{
top: '0px', // 顶部位置
bottom: '50px' // 底部位置（避开50px高的Tab栏）
}
);
webviews[pageUrl] = wv
}
return webviews[pageUrl]
}
/**
* 切换Tab对应的webview
* @param {string} targetPage 目标页面路径
*/
function switchTab(targetPage) {
// 获取目标webview
let targetWv = createWebview(targetPage)
// 如果是当前显示的页面，不处理
if (currentWebview === targetWv) return
// 隐藏当前webview（如果存在）
if (currentWebview) {
currentWebview.hide()
}
// 显示目标webview
targetWv.show() // 带动画显示（可选）
// 更新当前webview
currentWebview = targetWv
}
</script>
</body>
</html>