Question

我尝试通过设置

在屏幕顶部设置应用栏

var appBar = document.getElementById("commandsAppBar").winControl;
appBar.hide();
appBar.disabled = true;
appBar.layout = "custom";
appBar.placement = "top";

没有成功！我也试过

<div id="commandsAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="{layout:'custom',placement:'top'}">
     <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdLink',label:'Link',icon:'link',tooltip:'Add Link'}"></button>
     <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdImage',label:'Image',icon:'camera',tooltip:'Add Image'}"></button>
     <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAudio',label:'Sound',icon:'audio',tooltip:'Add Audio'}"></button>
     <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdLocation',label:'Location',icon:'globe',tooltip:'Add Location'}"></button>
 </div>

我会将它保留在底部，但它会影响inputPane在屏幕上的高度，并在调整大小时遮挡屏幕上大部分自定义的可信任div，我需要屏幕调整大小，但它不会＆＃ 39;似乎考虑到应用栏添加的额外高度，我再也无法向下滚动了！我试着玩hidePane事件的隐藏和显示，但我无法让它产生一个整洁的结果...如果有人有一个解决方案考虑到应用栏的额外高度，当inputPane显示也将是一个很大的帮助！

Answer 1

我们遇到了类似的问题。我们不是将appbar移到顶部，而是将内容滚动（溢出自动）并添加以下事件来调整内容容器的大小，以便应用栏不会遮挡任何内容：

appBar.winControl.addEventListener("aftershow", function () { appBarShowEvent(appBar, container); }, false);
appBar.winControl.addEventListener("beforehide", function () { appBarHideEvent(appBar, container); }, false);



function appBarHideEvent(appBarElement, containerElement) {
    var transition = {
        property: 'height',
        duration: 367,
        timing: "cubic-bezier(0.1, 0.9, 0.2, 0.1)",
        to: "100vh"
    };
    WinJS.UI.executeTransition(containerElement, transition);
}

function appBarShowEvent(appBarElement, containerElement) {
    var transition = {
        property: 'height',
        duration: 367,
        timing: "cubic-bezier(0.1, 0.9, 0.2, 0.1)",
        to: "calc(100vh - " + appBarElement.offsetHeight + "px)"
    };
    WinJS.UI.executeTransition(containerElement, transition);
}

如何在Windows 8.1通用应用程序WinJS中将appBar设置在屏幕顶部

1 个答案: