Question

我有这个：

<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>

如何才能让徽章通知正常工作？就像show（1）上面的按钮“搜索”？...我可以在CSS中制作这个...但是，我失去了使用tab-bar ...

<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>

任何人都知道我在哪里可以找到好的文档？

Answer 1

很遗憾，您无法为当前版本的OnsenUI的标签项添加徽章。我们将考虑将其置于下一版本中。

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

Answer 2

你发布问题已经有一段时间了，但由于我最近不得不处理同样的问题，这是我的解决方案。

Onsen修改每个ons-tab元素的DOM。因此，简单的DOM修改（jQuery与否）不起作用，因为我无法可靠地检测tabbar何时完全初始化。我所做的是创建了一个控制器来设置每秒执行一次的函数（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-notification CSS类添加以下内容：

.tabbar-notification {
  position: absolute;
  margin-left: 10px;
  margin-top: -44px;
  min-width: 16px;
  font-size: 16px;
  line-height: 16px;
  height: 16px;
}

OnsenUI：带有獾通知的Tabbar

2 个答案: