导航栏是我们经常需要实现的功能，在传统的开发方式下，我们需要实现导航栏的相互跳转，则需要复制多个导航栏代码块到需要的页面，这样不仅影响代码的美观，其可阅读性 可维护性也是大大降低，同时也非常影响开发效率，从而导致写了那么久，还在复制导航栏....
以下使用mui框架与5+API实现
我这里准备好了三个文件
tel.html与index.html都是需要导航栏跳转的 两个页面中使用mui框架常规布局 就不展示了
footer.html
因为需要重复使用，所以我建立了common.js写成公共函数
common.js
实现方法一:
实现方法二:
openWindow是mui封装的一个页面间跳转的方法，配置项与解释需参照官方文档，这里不做解释
footer.js
对应common.js方法一:
对应common.js方法二:
最后，我们只需要在对应的页面引入common.js并调用其中的nav方法传入name参，注意:name必须要与导航栏中的data-name设置的对应，否则无法高亮显示当前所处页面
MUI官方文档
https://dev.dcloud.net.cn/mui/window/#subpage
为了防止网络问题导致资源还未加载完成就运行导致报错，这边建议在onload后再调用nav函数会更加稳妥（当然，我在测试的时候并没有遇到这样脸黑的事）
至此，全篇结束！（下面提供可复制代码块）
代码已经经过多次验证，只要不二次跳转同一个页面则不会导致导航栏消失，如果还是无法实现可以私信我
代码块
<!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.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/common.css" />
</head>
<body>
<link href="css/mui.css" rel="stylesheet" />
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" data-name="index" data-url="index.html">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" data-name="tel" data-url="tel.html">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话</span>
</a>
<a class="mui-tab-item" data-name="ad" data-url="index.html">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">邮件</span>
</a>
<a class="mui-tab-item" data-name="ds" data-url="index.html">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
</body>
<script src="js/mui.js"></script>
<script type="text/javascript">
mui.init()
</script>
<script src="js/footer.js" type="text/javascript" charset="utf-8"></script>这里就只提供我比较推荐的方法(另一个懒得复制)
function nav(name) {
if (!name || typeof name !== 'string') {
throw new Error('name参填写错误!!');
}
/* 必要 */
mui.plusReady(function() {
let self = plus.webview.all(); //获取当前已创建的所有webview对象
let nowWebview = plus.webview.currentWebview(); //获取当前的webview对象
for (var i = 0; i < self.length; i++) {
const webviewId = self[i].id; //获取所有webview的id 默认为页面名称 例如:'index.html'
if (webviewId !== nowWebview.id) {
plus.webview.close(self[i].id); //清除除本身的webview对象
}
}
});
/* 实现方法 */
var footer = null;
mui.plusReady(function() {
footer = mui.preload({ //预加载页面
url: 'footer.html',
id: 'footer.html',
styles: {
bottom: '0px', //子页面底部位置
height: '51px', //子页面高度，默认为100%
},
createNew: true
});
if (!footer) {
footer = plus.webview.getWebviewById('footer.html'); //获取预加载页面的webview对象
}
//添加并触发自定义事件实现传值
mui.fire(footer, 'plusfire', {
name,
});
//显示该webview页面
footer.show();
});
} const Elem = document.querySelector('.mui-bar-tab');
/* 给每个a标签注册点击事件 因为mui阻止了a标签的默认事件 所以我使用了自定义属性 */
(function navOpenView() {
for (var i = 0; i < Elem.children.length; i++) {
Elem.children[i].addEventListener('tap', function(e) {
if (this.classList.contains('mui-active')) return;//不能再次跳转当前页面，否则plusReady会失效,导致导航栏消失！！
const dataUrl = this.getAttribute('data-url');//拿到对应地址
mui.openWindow(dataUrl, dataUrl, {//跳转页面
show: {
aniShow: 'none',//取消跳转动画
}
});
});
}
})();
/**
* 工具函数:将传过来的值与自定义属性data-name对应实现高亮的切换
* @param {string} name
* */
function _isNavItemActive(name) {
for (var j = 0; j < Elem.children.length; j++) {
Elem.children[j].classList.remove('mui-active');
}
for (var i = 0; i < Elem.children.length; i++) {
if (Elem.children[i].getAttribute('data-name') == name) {
Elem.children[i].classList.add('mui-active');
}
}
}
//接收fire方法传值并交付给工具函数执行
document.addEventListener('plusfire',e=>{
let name = e.detail.name;
if(!name){
return;
}
_isNavItemActive(name);
});
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
