WinJS：是否可以以编程方式向枢轴项添加预算？答案

【问题标题】：WinJS: Is it posible to add a budge to a Pivot Item programatically?WinJS：是否可以以编程方式向枢轴项添加预算？
【发布时间】：2015-07-02 14:41:45
【问题描述】：

我正在使用 WinJS 构建一个 Windows Phone 8.1 应用，并且我在 Pivot 元素中有一个 PivotItem：

<div data-win-control="WinJS.UI.Pivot">
    <div class="conversations"
         data-win-control="WinJS.UI.PivotItem"
         data-win-res="{winControl: {'header': 'conversations'}}">
     </div>
</div>

我尝试在标题旁边添加预算以显示类似于 Facebook 通知计数的未读对话计数，但未成功。

已经试过了：

WinJS.UI.Pages.define("/conversations.html", {
ready: function (element, options) {
        var span = document.createElement('DIV')
        span.innerHTML = "<span>5</span>";

        var p = document.querySelector(".conversations");
        p.appendChild(span);
    }
}

还有 CSS：

.conversations ::after{
    content: "3";
}

但仍然没有运气。有什么想法吗？

提前致谢！

【问题讨论】：

标签： javascript html css windows-phone-8.1 winjs

【解决方案1】：

找到一个解决方法：

var pivotHeader = document.querySelector(".win-pivot-headers");

if(pivotHeader != null)
{
        var headers = pivotHeader.childNodes;
        for (var i = 0; i < headers.length; i++) {
            var badge = document.createElement('span');
            badge.id = "unseenConversationsBudge";
            badge.innerHTML = "10";

            headers[i].appendChild(badge);
            WinJS.UI.Animation.fadeIn(badge);
        }
    }

然后在app的初始化事件和header item的animationstart/animationend事件中处理。还必须检查并删除跨度（如果存在）以避免重复。

【讨论】：