onsen-ui - 标签栏使页面无法点击

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-tabbar外面 ons-page并链接单 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

希望能帮助到你!