Question

我正在使用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";
}

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

提前致谢！

Answer 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的inicialization事件和header项的animationstart / animationend事件中处理它。如果存在则还必须检查并删除跨度以避免重复。

WinJS：以编程方式向数据透视表项添加预算是否可行？

1 个答案: