Mobile 结合Onsen UI滑动菜单和选项卡栏

我搜索了一下，没有找到正确的答案

---

我在左上角有“完整菜单”的滑动菜单，但我也希望顶部的选项卡栏突出显示3或4个特定链接/页面。我怎么能让他们都工作呢？在脚本中放置tabbar时，滑动菜单无法正常工作。

首先，默认情况下，tabbar元素会显示在页面底部：

您可以使用属性

position=“top”

关于滑动菜单+tabbar的组合，我在将这两个元素组合在一起时没有遇到任何问题。尝试创建一个新的Onsen UI滑动菜单项目，并通过以下方式修改文件Menu.html：

家
最爱
设置
第1页
切换菜单
点击“切换菜单”关闭/打开菜单

您还可以向左/向右滑动页面

首先，默认情况下，Tabbar元素显示在页面底部：

您可以使用属性

position=“top”

关于滑动菜单+tabbar的组合，我在将这两个元素组合在一起时没有遇到任何问题。尝试创建一个新的Onsen UI滑动菜单项目，并通过以下方式修改文件Menu.html：

家
最爱
设置
第1页
切换菜单
点击“切换菜单”关闭/打开菜单

您还可以向左/向右滑动页面

实现滑动和tabbar不会有问题

<ons-sliding-menu
                  main-page="page1.html"
                  menu-page="menu.html"       
                  side="left"
                  max-slide-distance="250px"
                  var="menu">
</ons-sliding-menu>

<ons-template id="page1.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
      </div>
      <div class="center">Page 1</div>
    </ons-toolbar>
<ons-tabbar position="top">
  <ons-tab page="home.html" active="true">
    <ons-icon icon="ion-home"></ons-icon>
    <span style="font-size: 14px">Home</span>
  </ons-tab>
  <ons-tab page="fav.html" active="true">
    <ons-icon icon="ion-star"></ons-icon>
    <span style="font-size: 14px">Favorites</span>
  </ons-tab>
  <ons-tab page="settings.html" active="true">
    <ons-icon icon="ion-gear-a"></ons-icon>
    <span style="font-size: 14px">Settings</span>
  </ons-tab>
</ons-tabbar>

<ons-template id="home.html">
  <ons-page>
    <p style="text-align:center">Home Page</p>
  </ons-page
</ons-template>

<ons-template id="fav.html">
  <ons-page>
    <p style="text-align:center">Favorites page</p>
  </ons-page
</ons-template>

<ons-template id="settings.html">
  <ons-page>
    <p style="text-align:center">Settings Page</p>
  </ons-page
</ons-template>
  </ons-page>
</ons-template>


<ons-template id="menu.html">
  <ons-list>
    <ons-list-item modifier="chevron" onclick="menu.setMainPage('page1.html', {closeMenu: true})">
      page1.html
    </ons-list-item>
    <ons-list-item modifier="chevron" onclick="menu.setMainPage('fav.html', {closeMenu: true})">
      page2.html
    </ons-list-item>
  </ons-list>
</ons-template>

第1页
家
最爱
设置
主页

在实现滑动和tabbar时没有问题

<ons-sliding-menu
                  main-page="page1.html"
                  menu-page="menu.html"       
                  side="left"
                  max-slide-distance="250px"
                  var="menu">
</ons-sliding-menu>

<ons-template id="page1.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
      </div>
      <div class="center">Page 1</div>
    </ons-toolbar>
<ons-tabbar position="top">
  <ons-tab page="home.html" active="true">
    <ons-icon icon="ion-home"></ons-icon>
    <span style="font-size: 14px">Home</span>
  </ons-tab>
  <ons-tab page="fav.html" active="true">
    <ons-icon icon="ion-star"></ons-icon>
    <span style="font-size: 14px">Favorites</span>
  </ons-tab>
  <ons-tab page="settings.html" active="true">
    <ons-icon icon="ion-gear-a"></ons-icon>
    <span style="font-size: 14px">Settings</span>
  </ons-tab>
</ons-tabbar>

<ons-template id="home.html">
  <ons-page>
    <p style="text-align:center">Home Page</p>
  </ons-page
</ons-template>

<ons-template id="fav.html">
  <ons-page>
    <p style="text-align:center">Favorites page</p>
  </ons-page
</ons-template>

<ons-template id="settings.html">
  <ons-page>
    <p style="text-align:center">Settings Page</p>
  </ons-page
</ons-template>
  </ons-page>
</ons-template>


<ons-template id="menu.html">
  <ons-list>
    <ons-list-item modifier="chevron" onclick="menu.setMainPage('page1.html', {closeMenu: true})">
      page1.html
    </ons-list-item>
    <ons-list-item modifier="chevron" onclick="menu.setMainPage('fav.html', {closeMenu: true})">
      page2.html
    </ons-list-item>
  </ons-list>
</ons-template>


第1页
家
最爱
设置
主页

我认为它是结合了ons导航器和ons选项卡栏，而不是ons滑动菜单和ons选项卡栏？我认为它是结合了ons导航器和ons选项卡栏，而不是ons滑动菜单和ons选项卡栏？我知道已经很久了，但你得到你的答案了吗，你可以选择一个最好的答案，或者你可以提供你自己的答案。问候-RanjithI知道这已经很长时间了，但是你得到你的答案了吗，你可以选择一个最好的答案，或者你可以提供你自己的答案。问候-兰吉特