溫泉：如何在ons-tabbar上使用ons-splitter？

Question

我使用onsen ui來創建混合應用程序。

我只需要知道是否有可能使用ons-splitter與ons-tabbar在同一時間，因爲我根本找不到任何這方面的參考。

當我在ons-tabbar上使用ons-splitter時，我的ons-splitter停止工作，但是當我從我的頁面中刪除ons-tabbar時，所有事情都再次開始工作。

這是我的代碼：

<ons-splitter > 
    <ons-splitter-side id="menu" side="right" width="220px" collapse swipeable> 
    <ons-page> 
     <ons-list> 
     <ons-list-item onclick="fn.load('home.html')" tappable> 
      Home 
     </ons-list-item> 
     <ons-list-item onclick="fn.load('settings.html')" tappable> 
      settings 
     </ons-list-item> 
     <ons-list-item onclick="fn.load('about.html')" tappable> 
      About 
     </ons-list-item> 

     </ons-list> 

    </ons-page> 
    </ons-splitter-side> 
    <ons-splitter-content> 
    <ons-navigator id="navi" page="home.html"></ons-navigator> 
    </ons-splitter-content> 
</ons-splitter> 


<ons-tabbar id="menu2" position="bottom"> 
<ons-tab page="home.html" label="Search For Personal Trainers" icon="search-plus" onclick="fn.load('home.html')" tappable disabled></ons-tab> 
</ons-tabbar> 

任何幫助，將不勝感激。

Answer 1

爲了使ons-splitter和ons-tabbar一起工作是通過使用ons-navigator作爲主要導航。

這裏是我的版本的基礎斷弗蘭DIOX的代碼張貼在這裏：https://community.onsen.io/topic/623/trouble-with-tab-splitter-and-navigation-working-together/2

<!-- First navigation component: Navigator. This will remain always on top of the app. --> 
     <ons-navigator id="myNavigator" page="splitter.html"> 
     </ons-navigator> 

      <!-- Second navigation component: Splitter. This will disappear if the first component changes its content. --> 
      <ons-template id="splitter.html"> 
      <ons-splitter> 
       <ons-splitter-side id="mySplitter" swipeable width="250px" collapse swipe-target-width="50px"> 
       <ons-page> 
        <ons-list> 
        <ons-list-item onclick="fn.load('home.html')" tappable> 
         Home 
        </ons-list-item> 
        </ons-list> 
       </ons-page> 
       </ons-splitter-side> 
       <ons-splitter-content id="content" page="tabbar.html"> 
       </ons-splitter-content> 
      </ons-splitter> 
      </ons-template> 

      <!-- Third navigation component: Tabbar. This will disappear if the first or second components change their content. --> 
      <ons-template id="tabbar.html"> 
       <ons-page id="tabbarPage"> 
       <ons-toolbar> 
        <div class="left"> 
        <!-- Toolbar-button with different icons depending on the platform. --> 
        <ons-toolbar-button onclick="fn.open()"> 
         <ons-icon icon="ion-navicon, material:md-menu" size="32px, material:24px"></ons-icon> 
        </ons-toolbar-button> 
        </div> 
        <div class="center">Nav, Splitter &amp; Tabs</div> 
        <div class="right"> 
        </div> 
       </ons-toolbar> 

       <!-- Auto-positioned Tabbar: top on Android, bottom on iOS/other. --> 
       <ons-tabbar id="myTabbar" position="auto"> 
        <ons-tab page="tab1.html" label="Tab 1" active> 
        </ons-tab> 
        <ons-tab page="tab2.html" label="Tab 2"> 
        </ons-tab> 
       </ons-tabbar> 

       <ons-template id="tab1.html"> 
        <ons-page> 
        <ons-toolbar> 
         <div class="center">Tab 1</div> 
        </ons-toolbar> 

        <p style="text-align: center;"> 
         This is the first tab. 
        </p> 
        </ons-page> 
       </ons-template> 

       <ons-template id="tab2.html"> 
        <ons-page> 
        <ons-toolbar> 
         <div class="center">Tab 2</div> 
        </ons-toolbar> 

        <p style="text-align: center;"> 
         This is the second tab. 
        </p> 
        </ons-page> 
       </ons-template> 
       </ons-page> 
      </ons-template>