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

【问题标题】：How do I set the appBar at the top of the screen in windows 8.1 universal app WinJS如何在 windows 8.1 通用应用程序 WinJS 中将 appBar 设置在屏幕顶部
【发布时间】：2014-09-12 13:39:42
【问题描述】：

我尝试通过设置将应用栏设置在屏幕顶部

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 在屏幕上的高度，并且在调整大小时会遮盖屏幕上的大部分自定义 contenteditable div，我需要调整屏幕大小，但它不会似乎没有考虑到应用栏增加的额外高度，我不能再向下滚动！我尝试使用 inputPane 事件的隐藏和显示，但我无法让它产生整洁的结果......如果有人有解决方案来考虑 inputPane 显示时应用栏的额外高度也会是帮了大忙！

【问题讨论】：

你读过这个文档吗？ msdn.microsoft.com/en-us/library/windows/apps/hh465302.aspx
感谢您的回复，我已经阅读了那篇文章，以及我相信在 msdn 网站上与 winJS 应用栏有关的所有其他内容，我还下载了 windows8 的示例应用栏。 1 html/winJS 有很好的例子，但对我的困境没有帮助:(我添加了一个解决方法，它检测 inputPane 何时显示或隐藏并相应地更改内容高度，但它远非理想......
啊，看来您无法更改 appBar 在手机上的位置 msdn.microsoft.com/en-us/library/windows/apps/dn632432.aspx 所以解决方法是解决 app bar 不覆盖我的 contenteditable div 的问题！！
我没注意到你在说手机 :( 不，手机上的 AppBar 总是在底部

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

【解决方案1】：

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

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);
}

【讨论】：