<!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>
<script src="js/mui.min.js"></script>
<script src="js/mui.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
<style>
* {
touch-action: none;
}
</style>
</head>
<body>
<!-- 顶部导航栏 -->
<!-- 底部导航栏 -->
<nav class="mui-bar mui-bar-tab myfooter">
<!-- mui-active 激活元素,点击的时候会变成蓝色,并且自动添加出mui-active -->
<a class="mui-tab-item mui-active" id="btn" href="./pages/index.html">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" id="btn1" href="./pages/file.html">
<span class="mui-icon mui-icon-list"></span>
<span class="mui-tab-label">文件</span>
</a>
<a class="mui-tab-item" id="btn2" href="./pages/test.html">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">测试</span>
</a>
<a class="mui-tab-item" id="btn3" href="./pages/jingyan.html">
<span class="mui-icon mui-icon-chat"></span>
<span class="mui-tab-label">经验</span>
</a>
<a class="mui-tab-item" id="btn4" href="./pages/user.html">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">用户</span>
</a>
</nav>
</body>
<script>
var subpage = [
"./pages/index.html",
"./pages/file.html",
"./pages/test.html",
"./pages/jingyan.html",
"./pages/user.html",
];
mui.plusReady(function() {
var currentWebview = plus.webview.currentWebview();
for (var i = 0; i < 5; i++) {
var sub = plus.webview.create(subpage[i], subpage[i], {
top: "0px",
bottom: "50px",
});
currentWebview.append(sub);
if (i > 0) {
sub.hide();
}
}
});
mui(".myfooter").on("tap", "a", function() {
// alert(this.href);
var currentActiveTab = this.getAttribute("href");
if (currentActiveTab == mui(".mui-active")[0].getAttribute("href")) {
return;
}
plus.webview.hide(mui(".mui-active")[0].getAttribute("href")); // 隐藏
plus.webview.show(currentActiveTab); // 显示
});
</script>
</html>
这是我的代码。这段代码生成的底栏5+APP 打包后,安卓平台可以正常使用,而苹果平台会出现挤压情况。这是怎么回事?
0 个回复