0

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

我已经正确设置了单页导航，并且在我的根页面中加载的第一页包含一个带有多个 PivotItems 的 Pivot。每个 PivotItem 都包含一个 ListView，其中包含几个项目，这些项目使其在小型设备（电话）上超出页面底部。

在 WP8 上，当我将 ListView 滚动到列表底部时，它会停止，但如果我继续尝试滚动越过底部，而不是 ListView 创建反弹效果，整个页面都会移动。而且它不会正确地执行反弹效果，因为它会导致 Pivot Title 被剪辑在电话屏幕顶部的状态栏下方。我可以反向滚动它，当我点击列表顶部时，我得到相同的效果......整个页面移动。

不良滚动行为仅在我触摸 ListView 区域时发生。如果我尝试垂直平移 PivotItem 标题，则不会发生任何事情。如果 ListView 全部为空（即我的视图模型已损坏），则当我触摸 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"/>

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

4

1 回答 1

1

作为 HTML5/javascript应用程序编程的新手，我没有意识到还没有一个很好的布局方案可用。微软似乎通过实现 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; }

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

于 2014-11-19T21:12:33.440 回答