Question

我正在使用Multi-Device Hybrid App模板和WinJS（这是基于Cordova）编写应用程序。

我正确地设置了单页导航设置，并且在我的根页面中加载的第一页包含一个带有多个PivotItem的Pivot。每个PivotItem都包含一个ListView，其中有几个项目可以使它在小型设备（手机）上延伸到页面底部。

在WP8上，当我将ListView滚动到列表底部时，它将停止，但如果我一直试图滚动到底部，而不是ListView创建一个反弹效果，整个页面就会移动。并且它没有正确地执行跳出效果，因为它会导致Pivot标题被剪切到手机屏幕顶部的状态栏下。我可以反向向后滚动它，当我点击列表的顶部时，我得到相同的效果......整个页面移动。

只有在我触摸ListView区域时才会出现滚动不良行为。如果我尝试垂直平移PivotItem标题，则没有任何反应。如果ListViews都是空的（即我的视图模型已损坏），当我触摸ListView区域时，不会发生滚动行为。

我已将此代码添加到我的根页面的CSS文件中：

body {
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
 overflow: hidden;
-ms-content-zooming: none;
-ms-touch-action:none;
}

这确实会停止默认的WP8默认HTML页面反弹。我可以加载一个只包含几个文本元素和一个按钮的不同页面，它不会滚动。它对Pivot滚动问题没有帮助。

我尝试手动编辑我的config.xml文件并添加以下行：

  <preference name="DisallowOverscroll" value="true"/>

没有帮助。有人有什么建议吗？

Answer 1

作为HTML5 / javascript app 编程的新手，我没有意识到还没有很好的布局方案。微软似乎已经通过实现CSS网格（-ms-grid）属性做到了这一点，但是这在任何其他浏览器上都不存在。

因此，要使WinJS中的当前控件集在所有浏览器上都能正常运行，我必须默认为标题，内容和页脚（appbar）的绝对定位。它并不理想，因为要展开和显示标签的当前appbar动画要求你在主要内容区域的底部留下一个很好的边距，从而浪费空间。

我使用它（自由改编自另一个stackoverflow答案）

<!-- Header not necessary for pivot -->
<header class="row" aria-label="Header content" role="banner">
   {title stuff}
</header>
<section class="content row scroll-y" aria-label="Main content" role="main">
   {main content}
</section>
<footer aria-label="App Bar" role="menubar"
        data-win-control="WinJS.UI.AppBar"
        data-win-options="{placement: 'bottom', layout: 'commands'}">
    {appbar buttons}
 </footer>

与此相关的CSS是：

.row, .col { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }

.header.row { height: 128px; top: 0; }
.content.row { top: 128px; bottom: 50px; }

标题的实际像素高度取决于您，但appbar适用于WinJS上的当前应用栏（截至2014年11月）。

WP8 / WinJS / Cordova - 在PivotItem中滚动ListView的开头或结尾会导致整个页面移动

1 个答案: