标签栏使页面无法点击

Question

当我向我的页面添加一个 ons-tabbar 时，它会覆盖我的整个页面，因此我无法点击除标签本身之外的任何内容。

我的页面如下所示（每个页面都有自己的 html 文件）：

<ons-page>

<ons-tabbar>
    <label class="tab-bar__item">
        <input type="radio" name="tab-bar-a" checked="checked">
        <button class="tab-bar__button">
            <i class="tab-bar__icon fa fa-dashboard"></i>
            <div class="tab-bar__label">Dashboard</div>
        </button>
    </label>

    <label class="tab-bar__item" ng-click="myNav.pushPage('views/device-settings.html', {animation : 'slide'})">
        <button class="tab-bar__button">
            <i class="tab-bar__icon fa fa-cogs"></i>
            <div class="tab-bar__label">Settings</div>
        </button>
    </label>
</ons-tabbar>

<ons-toolbar>
    <div class="left">
        <ons-toolbar-button ng-click="menu.toggle()">
            <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
    </div>
    <div class="center">Device</div>
</ons-toolbar>

<ons-list id="device">
    <ons-list-item>
        <label class="checkbox">
            <input type="checkbox" checked="checked">
            <div class="checkbox__checkmark"></div>
            Switch 1
        </label>
        <div class="switch-detail">
            <ons-icon icon="fa-calendar"></ons-icon>
            Last enabled: 9 February 2016 on 17:39
        </div>
    </ons-list-item>
    <ons-list-item>
        <label class="checkbox">
            <input type="checkbox" checked="checked">
            <div class="checkbox__checkmark"></div>
            Switch 2
        </label>
        <div class="switch-detail">
            <ons-icon icon="fa-calendar"></ons-icon>
            Last enabled: 9 February 2016 on 17:39
        </div>
    </ons-list-item>
    <ons-list-item>
        <label class="checkbox">
            <input type="checkbox" checked="checked">
            <div class="checkbox__checkmark"></div>
            Switch 3
        </label>
        <div class="switch-detail">
            <ons-icon icon="fa-calendar"></ons-icon>
            Last enabled: 9 February 2016 on 17:39
        </div>
    </ons-list-item>
</ons-list>

Answer 1

不要这样实现ons-tabbar，使用以下语法：

<ons-tabbar>
  <ons-tab>tab1</ons-tab>
  <ons-tab>tab2</ons-tab>
</ons-tabbar>

另外，尝试在ons-page 之外实现ons-tabbar 并将单个ons-tab 链接到相关页面（使用ons-template）：

<ons-tabbar>
  <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>
    PAGE CONTENT
  </ons-page>
</ons-template>

这是一个基于您的代码的 CodePen 示例：

http://codepen.io/andipavllo/pen/rxQEeY

希望对你有帮助！

Answer 2

ons-tabbar 有子类ons-tab。您将下部标签栏图标数组的内容作为内容提供，并且必须将页面内容作为 page="ID" 的参数 id 提供。

 <ons-tabbar var="tabbar" animation="fade">
  <ons-tab
    active="true"
    icon="ion-chatbox-working"
    label="Comments"
    page="page1.html">
  </ons-tab>
  <ons-tab
    icon="ion-ios-cog"
    label="Settings"
    page="page2.html">
  </ons-tab>
</ons-tabbar>
<ons-template id="page1.html" >
  <ons-toolbar>
    <div class="center">Page 1</div>
  </ons-toolbar>
</ons-template>
  <ons-template id="page2.html" >
  <ons-toolbar>
    <div class="center">Page 2</div>
  </ons-toolbar>
</ons-template>

这是一些工作的codePen： http://codepen.io/anon/pen/yeQdMX