mui 公共底部tap栏切换效果

底部tap栏代码

首页



电话



邮件



设置

JS代码
function changeView(id){
var view = plus.webview.getWebviewById(id);
view.show();
}
mui.init({
subpages:[
{
url:'index.html',
id:'index.html',
styles:{
top:'0px',
bottom:'0px',
}
},
{
url:'plus/one.html',
id:'one.html',
styles:{
top:'0px',
bottom:'44px',
}
},
{
url:'plus/two.html',
id:'two.html',
styles:{
top:'0px',
bottom:'44px',
}
},
{
url:'plus/three.html',
id:'three.html',
styles:{
top:'0px',
bottom:'44px',
}
},
{
url:'plus/four.html',
id:'four.html',
styles:{
top:'0px',
bottom:'44px',
}
}
]
});
mui.plusReady(function(){
var index = plus.webview.getWebviewById('one.html')
index.show();//进入初始化为首页显示
//监听
document.getElementById('one').addEventListener('tap',function(){
changeView('one.html');
});
document.getElementById('two').addEventListener('tap',function(){
changeView('two.html');
});
document.getElementById('three').addEventListener('tap',function(){
changeView('three.html');
});
document.getElementById('four').addEventListener('tap',function(){
changeView('four.html');
});
})
此种写法不会出现多次点击白屏效果，亦不会出现进入后不是首页