Question

我的应用程序在屏幕底部有一个WinJS AppBar控件。我使用.showOnlyCommands(buttonsToShowArray)来显示和隐藏ListView itemSelectionChanged事件上的按钮。

我现在遇到的问题是，当我每次拨打.showOnlyCommands时，要隐藏的按钮（或者你可能会说“已更换”）将在屏幕顶部闪烁。

我尝试使用Microsoft示例应用程序，但这不会发生。我尝试使用.showCommands + .hideCommands方法，这是相同的行为。请注意，这不会发布在Win8的Release Preview版本之前。

我不知道发生了什么事。有什么想法吗？

编辑：我做了进一步调查，问题发生在hideCommands。假设我在appbar上显示了3个按钮。我打电话给hideCommands隐藏所有3个按钮。 3个按钮的图标将在appbar上消失，然后堆积在屏幕的左上角然后消失。（即屏幕一角会有3个闪烁的按钮）。

Answer 1

当AppBar处于“显示”过程中时，您可能正在调用showOnlyCommands。我发现在beforeshow或aftershow处理程序中调用这些方法时会发生这种情况。 Animating your UI的引用阐明了原因：

使用淡入和淡出动画来显示或隐藏瞬态UI或控件。一个示例是在应用栏中，由于用户交互，可以显示新控件。

示例应用在显示应用栏之前显示/隐藏按钮。在调用showOnlyCommands之前，您可能正在调用应用栏上的show。

Answer 2

此问题的临时攻击是：

在调用showOnlyCommands或HideCommands之前，将该按钮设为不可见。

以下是我现在使用的代码：

/* 
 * @param {WinJS.UI.AppBar} appbar winControl
 * @param {Array} array of appbar buttons to be shown
 */
function showOnlyCommands(appbarControl, buttonsToShow) {
    var toShow = {};
    for (var i = 0; i < buttonsToShow.length; i++) {
        toShow[buttonsToShow[i].id] = true;
    }
    for (var i = 0; i < visibleButtonsList.length; i++) {
        var id = visibleButtonsList[i].id;
        if (!toShow[id]) {
            // set the display property of the buttons to be hidden to "none"               
            var button = document.getElementById(id);
            if (button) {
                button.style.display = 'none';
            }
        }
    }
    // update the visible buttons list
    visibleButtonsList = buttonsToShow;
    // Note that we don't need to set the "display" property back for the buttons, 
    // because WinJS.UI.AppBar.showOnlyCommands would set it back internally
    appbarControl.showOnlyCommands(buttonsToShow);
}

WinJS AppBar按钮闪烁隐藏

2 个答案: