2

我正在使用新的 Monaca Onsen 2.0 制作材料设计应用程序，我使用了 ons-toolbar 并且工作正常，但我不明白如何将 ons-tabbar 与材料一起使用，有什么技巧吗？

<ons-toolbar modifier="material"> WORKS FINE </ons-toolbar>

<ons-tabbar modifier="material"> NOT WORKING WITH MATERIAL </ons-tabbar>
4

2 回答 2

0

您的代码是错误的，因为ons-tabbar应始终包含至少一个ons-tab.

看看这个CodePen 示例，一切正常。

这是代码：

<ons-tabbar modifier="material">
  <ons-tab page="comments.html" label="Comments" icon="ion-chatbox-working"></ons-tab>
  <ons-tab page="tags.html" label="Tags" icon="ion-ios-pricetag"></ons-tab>
  <ons-tab page="settings.html" label="Settings" icon="ion-ios-cog"></ons-tab>
</ons-tabbar>

<ons-template id="home.html">
  <ons-toolbar>
    <div class="center">Home</div>
  </ons-toolbar>

  <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>

<ons-template id="comments.html">
  <ons-toolbar>
    <div class="center">Comments</div>
  </ons-toolbar>

  <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>

<ons-template id="tags.html">
  <ons-toolbar>
    <div class="center">Tags</div>
  </ons-toolbar>

  <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>

<ons-template id="feed.html">
  <ons-toolbar>
    <div class="center">Feed</div>
  </ons-toolbar>

  <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>

<ons-template id="settings.html">
  <ons-toolbar>
    <div class="center">Settings</div>
  </ons-toolbar>

  <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>
于 2016-01-08T05:38:13.783 回答
0

检查你的 onsenui.js
我实际上认为 Monaca 上的项目页面可能没有更新到最新的 onsen ui 2.0。对我来说似乎就是这种情况。它可能在第一行说：

/*! onsenui v2.0.0-beta - 2015-11-11 */

您可能需要像 Andi Pavllo 使用过的那样更新

/*! onsenui v2.0.0-beta.2 - 2015-12-01 */

然而 Github 上最新的Onsen UI 2.0实际上是

/*! onsenui v2.0.0-beta.5 - 2016-01-08 */

而且您不能只换掉安装整个软件包所需的 js。

*编辑：我注意到安装新软件包后一切正常，但是当我尝试使用主题滚轮时，它又恢复到旧的标签栏。因此主题滚轮可能不会更新。

于 2016-01-08T20:01:12.637 回答