9、底部导航切换界面

HTML部分:

< nav  class = "mui-bar mui-bar-tab" >      < a  id = "defaultTab"  class = "mui-tab-item mui-active"  href = "a.html" >          < span  class = "mui-icon mui-icon-videocam" ></ span >          < span  class = "mui-tab-label" >社区</ span >      </ a >      < a  class = "mui-tab-item"  href = "message.html" >          < span  class = "mui-icon mui-icon-chatboxes" >< span  class = "mui-badge" >9</ span ></ span >          < span  class = "mui-tab-label" >群组</ span >      </ a >      < a  class = "mui-tab-item"  href = "b.html" >          < span  class = "mui-icon mui-icon-home" ></ span >          < span  class = "mui-tab-label" >我的</ span >      </ a > </ nav >

JavaScript部分:

//创建子页面 var  subpages = [ 'a.html' , 'b.html' ]; var  subpage_style = {      top:  '0px' ,      bottom:  '50px' ,      scrollIndicator:  "none"  , // 当你的界面的内容足够多的时候，会出现滚动条，这个是隐藏滚动条 };               //创建子页面，首个选项卡页面显示，其它均隐藏； mui.plusReady( function (){      var  self = plus.webview.currentWebview();      for ( var  i=0;i<subpages.length;i++){          var  sub = plus.webview.create(subpages[i],subpages[i],subpage_style);          if (i>0){              sub.hide();          }          self.append(sub);      } });                             //当前激活选项卡 var  activeTab = subpages[0];               //选项卡点击事件 mui( '.mui-bar-tab' ).on( 'tap' ,  'a' ,  function (e) {      var  targetTab =  this .getAttribute( 'href' );      if  (targetTab == activeTab) {              return ;      }      //显示目标选项卡      plus.webview.show(targetTab);      //隐藏当前;      plus.webview.hide(activeTab);      //更改当前活跃的选项卡      activeTab = targetTab; });               //自定义事件，模拟点击“首页选项卡” document.addEventListener( 'gohome' , function  () {      var  defaultTab = document.getElementById( "defaultTab" );      //模拟首页点击      mui.trigger(defaultTab, 'tap' );      //切换选项卡高亮      var  current = document.querySelector( ".mui-bar-tab>.mui-tab-item.mui-active" );      if (defaultTab!==current){          current.classList.remove( 'mui-active' );          defaultTab.classList.add( 'mui-active' );      } });

转载于:https://www.cnblogs.com/zhouyuxiang/p/4696220.html