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>