Onsen：如何在ons-tabbar中使用ons-splitter？

Question

我正在使用onsen ui创建一个混合应用程序。

我只需要知道是否可以同时使用ons-splitter和ons-tabbar ，因为我根本找不到任何引用。

当我将ons-splitter与ons-tabbar一起使用时，我的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作为主要导航。

这是我基于Fran 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>