Question

当我在页面上添加一个ons-tabbar时，它会覆盖整个页面，这样我就无法点击除标签本身以外的任何内容。

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

{{1}}

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

希望它有所帮助！

Answer 2

ons-tabbar有类似ons-tab的孩子。您将下方tabbar图标数组的内容作为内容提供，并且必须将页面内容作为参数id page =“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>

以下是一些正常工作的代码： http://codepen.io/anon/pen/yeQdMX

标签栏使页面不可点击

2 个答案: