版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sureSand/article/details/81089642
首先建四个html,分别为sub1.html,sub2.html,sub3.html,sub4.html,分别对应底部四个选项卡,通过mui.init来建立联系:
<!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.css" rel="stylesheet"/>
</head>
<body>
<header class="mui-bar mui-bar-nav hBg">
<div id="logo">
<img src="imgs/logo.png"/>
</div>
<div id="searchBut">请输入要翻译的文本</div>
</header>
<nav class="mui-bar mui-bar-tab" id = "navFooter">
<a class="mui-tab-item mui-active" id="nav1">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" id="nav2">
<span class="mui-icon mui-icon-compose"></span>
<span class="mui-tab-label">词典</span>
</a>
<a class="mui-tab-item" id="nav3">
<span class="mui-icon mui-icon-star"></span>
<span class="mui-tab-label">热点</span>
</a>
<a class="mui-tab-item" id="nav4">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">我的</span>
</a>
</nav>
<script src="js/mui.min.js"></script>
<script type="text/javascript" src="js/h.js" ></script>
<script type="text/javascript" charset="utf-8">
mui.init({
subpages : [
{
url : 'sub1.html',
id : 'sub1.html',
styles : {top :'44px', bottom:'44px', width:"100%"}
},
{
url : 'sub2.html',
id : 'sub2.html',
styles : {top :'44px', bottom:'44px', width:"100%", left:"100%"}
},
{
url : 'sub3.html',
id : 'sub3.html',
styles : {top :'44px', bottom:'44px', width:"100%", left:"200%"}
},
{
url : 'sub4.html',
id : 'sub4.html',
styles : {top :'44px', bottom:'44px', width:"100%", left:"300%"}
}
]
});
//上面初始化四个页面,下面调用点击的函数进行操作
h('#nav1').tap(function(){changSub(1);});
h('#nav2').tap(function(){changSub(2);});
h('#nav3').tap(function(){changSub(3);});
h('#nav4').tap(function(){changSub(4);});
function changSub(index){
var sub1 = plus.webview.getWebviewById('sub1.html');
var sub2 = plus.webview.getWebviewById('sub2.html');
var sub3 = plus.webview.getWebviewById('sub3.html');
var sub4 = plus.webview.getWebviewById('sub4.html');
sub1.setStyle({left: (1 - index) * 100 + '%'});
sub2.setStyle({left: (2 - index) * 100 + "%"});
sub3.setStyle({left: (3 - index) * 100 + "%"});
sub4.setStyle({left: (4 - index) * 100 + "%"});
}
</script>
</body>
</html>
上面是点击更改选项的操作,下面是通过拖动页面进行操作,拖动页面的逻辑就直接在四个sub.html中写了,首先写sub1.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" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet"/>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
var _index, _self, _next,_prev;
mui.plusReady(function(){
_self = plus.webview.currentWebview();
_next = plus.webview.getWebviewById('sub2.html');
_prev = plus.webview.getWebviewById('sub4.html');
_index = plus.webview.getLaunchWebview();
//向右滑动
_self.drag({
direction : "left",
moveMode : "followFinger"
},{
view : _next,
moveMode : "follow"
},function(e){
if(e.type == 'end' && e.result){
_index.evalJS('h("#navFooter").find("a").removeClass("mui-active"); h("#nav2").addClass("mui-active")')
}
});
//向左滑动
_self.drag({
direction : "right",
moveMode : "followFinger"
},{
view : _prev,
moveMode : "follow"
},function(e){
if(e.type == 'end' && e.result){
_index.evalJS('h("#navFooter").find("a").removeClass("mui-active"); h("#nav4").addClass("mui-active")')
}
});
});
</script>
</head>
<body>
sub1
</body>
</html>
var _index, _self, _next,_prev;四个变量分别是入口页面,当前页面,下个页面,上个页面;
_self.drag函数就是拖动函数,里面的function(e){
if(e.type == 'end' && e.result){
_index.evalJS('h("#navFooter").find("a").removeClass("mui-active"); h("#nav4").addClass("mui-active")')
}
就是为了将下面底部选项卡的点亮样式先全部删除,再点亮入口页面。
最后以此逻辑分别复制粘贴其它三个页面,修改相应的subx.html就可以了,sub2.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" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet"/>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
var _index, _self, _next,_prev;
mui.plusReady(function(){
_self = plus.webview.currentWebview();
_next = plus.webview.getWebviewById('sub3.html');
_prev = plus.webview.getWebviewById('sub1.html');
_index = plus.webview.getLaunchWebview();
//向右滑动
_self.drag({
direction : "left",
moveMode : "followFinger"
},{
view : _next,
moveMode : "follow"
},function(e){
if(e.type == 'end' && e.result){
_index.evalJS('h("#navFooter").find("a").removeClass("mui-active"); h("#nav3").addClass("mui-active")')
}
});
//向左滑动
_self.drag({
direction : "right",
moveMode : "followFinger"
},{
view : _prev,
moveMode : "follow"
},function(e){
if(e.type == 'end' && e.result){
_index.evalJS('h("#navFooter").find("a").removeClass("mui-active"); h("#nav1").addClass("mui-active")')
}
});
});
</script>
</head>
<body>
sub2
</body>
</html>
sub3.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" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet"/>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
var _index, _self, _next,_prev;
mui.plusReady(function(){
_self = plus.webview.currentWebview();
_next = plus.webview.getWebviewById('sub4.html');
_prev = plus.webview.getWebviewById('sub2.html');
_index = plus.webview.getLaunchWebview();
//向右滑动
_self.drag({
direction : "left",
moveMode : "followFinger"
},{
view : _next,
moveMode : "follow"
},function(e){
if(e.type == 'end' && e.result){
_index.evalJS('h("#navFooter").find("a").removeClass("mui-active"); h("#nav4").addClass("mui-active")')
}
});
//向左滑动
_self.drag({
direction : "right",
moveMode : "followFinger"
},{
view : _prev,
moveMode : "follow"
},function(e){
if(e.type == 'end' && e.result){
_index.evalJS('h("#navFooter").find("a").removeClass("mui-active"); h("#nav2").addClass("mui-active")')
}
});
});
</script>
</head>
<body>
sub3
</body>
</html>
sub4.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" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet"/>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
var _index, _self, _next,_prev;
mui.plusReady(function(){
_self = plus.webview.currentWebview();
_next = plus.webview.getWebviewById('sub1.html');
_prev = plus.webview.getWebviewById('sub3.html');
_index = plus.webview.getLaunchWebview();
//向右滑动
_self.drag({
direction : "left",
moveMode : "followFinger"
},{
view : _next,
moveMode : "follow"
},function(e){
if(e.type == 'end' && e.result){
_index.evalJS('h("#navFooter").find("a").removeClass("mui-active"); h("#nav1").addClass("mui-active")')
}
});
//向左滑动
_self.drag({
direction : "right",
moveMode : "followFinger"
},{
view : _prev,
moveMode : "follow"
},function(e){
if(e.type == 'end' && e.result){
_index.evalJS('h("#navFooter").find("a").removeClass("mui-active"); h("#nav3").addClass("mui-active")')
}
});
});
</script>
</head>
<body>
sub4
</body>
</html>
代码自取:https://github.com/lightTrace/Hbuilder-app,请注意这是完整代码,有后面内容的可自行跳过辨别!