HBuilder底部选项卡的子页面切换效果
→
1:新建sub1.html、sub2.html、sub3.html、sub4.htm、 sub5.html (分别代表 ”主页“,”通讯录“........)
2:接下来,设置切换样式,新建一个js在index.html里面
<script type="text/javascript">
var subpages=["sub1.html","sub2.html","sub3.html","sub4.html","sub5.html "]; //以数组方式设置页面id
var subpageStyle={ //设置主页面打开的样式(设置顶部和底部,留空间给中间部分显示出来,放sub1.html这些页面)
top:"44px", //标题栏的高度,更多详细参数查看http://dev.dcloud.net.cn/mui/ui/#mask
bottom:"50px" //底部选项卡的高度
};
mui.plusReady(function(){
var self=plus.webview.currentWebview(); //创建子窗体
for(vari=0;i<subpages.length;i++){
var sub=plus.webview.create(subpages[i],subpages[i],subpageStyle); //当前Webview的URL地址、ID、样式。功能:创建子窗体
sub.hide(); //功能:隐藏页面
self.append(sub); //功能: 追加子页面,首个选项卡页面显示,其它均隐藏
}
plus.webview.show(subpages[0]); //设置主页的sub.html默认显示出来,其他sub2.html默认隐藏
})
mui(".mui-bar-tab").on("tap","a",function(e){ //通过.mui-bar-tap里的a元素绑定tap事件,达到批量绑定的效果
var tagPage=this.getAttribute("href");//getAttribute()获取属性函数
plus.webview.show(tagPage,"fade-in",100) //fade-in淡入,100毫秒
})
</script>
- 上一篇: C语言二进制文件读取解析
- 下一篇: String.getBytes()