1

我有这个：

<ons-tabbar var="tabbar">
    <ons-tabbar-item icon="search" label="Buscar" page="page2.html" active="true"><div class="badge-notification"><span class="notification">1</span></div></ons-tabbar-item>
    <ons-tabbar-item icon="star-o" label="Revisões" page="page2.html">XXXXXXX<span class="notification">9</span></ons-tabbar-item>
    <ons-tabbar-item icon="tag" label="Combinações" page="page2.html"><span class="notification">9</span></ons-tabbar-item>
    <ons-tabbar-item icon="comments" label="Conversas" page="page2.html"><span class="notification">9</span></ons-tabbar-item> </ons-tabbar>

我怎样才能让徽章通知工作？就像在“搜索”按钮上方显示（1）一样？...我可以在 CSS 中制作它...但是，我失去了对标签栏的使用...

<div class="tab-bar">
<label class="tab-bar__item">
    <input type="radio" name="tab-bar-screen2" data-role="none" checked>
    <button class="tab-bar__button" data-role="none" >
        <i class="tab-bar__icon fa fa-4x fa-search"></i>
        <div class="tab-bar__label">Buscar</div>
    </button>
</label>
<label class="tab-bar__item">
    <input type="radio" name="tab-bar-screen2" data-role="none">
    <button class="tab-bar__button" data-role="none" >
    <i class="tab-bar__icon fa fa-4x fa-star-o"></i>
    <div class="tab-bar__label">Revisões</div>
    <span class="notification">8</span>
    </button>
</label>
<label class="tab-bar__item">
    <input type="radio" name="tab-bar-screen2" data-role="none">
    <button class="tab-bar__button" data-role="none" >
    <i class="tab-bar__icon fa fa-4x fa-tag"></i>
    <div class="tab-bar__label">Combinações</div>
    <span class="notification">9</span>
    </button>
</label>
<label class="tab-bar__item">
    <input type="radio" name="tab-bar-screen2" data-role="none" >
    <button class="tab-bar__button" data-role="none" >
    <i class="tab-bar__icon fa fa-4x fa-comments"></i>
    <div class="tab-bar__label">Bate-Papo</div>
    <span class="notification">10</span>
    </button>
</label>
</div>

谁也知道我在哪里可以找到好的文档？

4

2 回答 2

0

遗憾的是，您不能在当前版本的 OnsenUI 的选项卡项中添加徽章。我们会考虑把它放在下一个版本中。

但是，如果您使用上面代码中所示的 CSS，则有可能。但是你不能再使用 OnsenUI 框架的功能和过渡了，因为它现在只是简单的 OnsenUI CSS 组件。因此，您需要使用 JavaScript 编写自己的必要函数。

于 2014-08-07T03:46:40.200 回答
0

自从您发布问题以来已经有一段时间了，但是由于我最近不得不处理完全相同的问题，所以这是我的解决方案。

Onsen 修改每个ons-tab元素的 DOM。因此，简单的 DOM 修改（无论是否 jQuery）都不起作用，因为我无法可靠地检测到选项卡栏何时完全初始化。我所做的是创建了一个控制器，该控制器设置了一个每秒执行一次的函数（changeNotifications）。在这个函数中，一旦我检测到标签栏已被初始化，我就会添加通知。

这是我的index.html文件：

<body ng-controller="MainCtrl">
  <ons-tabbar var="tabbar" modifier="ios">
    <ons-tab icon="ion-email" id="inbox-tab" label="{{ 'Inbox' | translate }}" page="inbox.html" active="true">
  <!-- more tabs -->
</body>

在MainCtrl.js我有我的“主要”控制器”

function _MainCtrl($scope,) {
  function changeNotifications() {
    var inboxTab = $('#inbox-tab');
    if (!inboxTab.length) {
      return; // not initialized yet
    }
    var notif = $('#inbox-notification');
    if (!notif.length) {
      $('#inbox-tab > button').append(
        $('<div class="notification tabbar-notification" id="inbox-notification">5</div>'));
      notif = $('#inbox-notification');
    }

    var numWhatever = 5;
    if (numWhatever == 0) {
      notif.remove();
    } else {
      notif.text(numWhatever);
    }
  }

  function initNotifications() {
    ons.ready(function() {
      setInterval(changeNotifications, 1000);
    });
  }
  initNotifications();
}

除了 Onsen 的notification样式之外，我还通过tabbar-notificationCSS 类添加了以下内容：

.tabbar-notification {
  position: absolute;
  margin-left: 10px;
  margin-top: -44px;
  min-width: 16px;
  font-size: 16px;
  line-height: 16px;
  height: 16px;
}
于 2015-09-30T20:42:48.080 回答