垂直滚动，使用 WinJS 的 ListView答案

【问题标题】：Vertical Scroll, ListView with WinJS垂直滚动，使用 WinJS 的 ListView
【发布时间】：2013-04-04 23:03:31
【问题描述】：

如何在使用 WinJS 的 Windows8 应用程序中使用 HTML/JS 使 ListView 垂直滚动？

我使用 XAML/C# 开发了一个 Windows 8 应用程序，在应用程序中我使用 ListView 来获取具有垂直滚动行为的列表。

我现在正在尝试使用 HTML/JS 创建相同的应用程序，但无法使用垂直滚动的 ListView 创建列表。它会自动将 ListItems 放在水平线上并水平滚动。

我认为 GridView 可以用于水平滚动的“列表”，而 ListView 可以用于垂直滚动。

我还尝试使用以下方法将 ListView 包装在一个在溢出时垂直滚动的 div 中：

<div style="overflow-y:scroll;">
    // ListView
</div>

【问题讨论】：

标签： html css windows-8 winjs

【解决方案1】：

在 XAML 中，您使用不同的控件 - GridView 用于按列填充的水平项目列表，并在垂直空间用完时换行，而 ListView 用于按列填充但不换行的垂直项目列表。

在 HTML 中，您对这两种情况都使用 ListView。要在相同的两种行为之间切换，请设置 ListView 的 layout 属性。将其设置为 new WinJS.UI.GridLayout() 相当于 XAML GridView 和 new WinJS.UI.ListLayout() 相当于 XAML ListView。

你可以在 JavaScript 中使用类似...

    if (Windows.UI.ViewManagement.ApplicationView.value == Windows.UI.ViewManagement.ApplicationViewState.snapped) {
        demosListView.layout = new WinJS.UI.ListLayout();
    }
    else {
        demosListView.layout = new WinJS.UI.GridLayout();
    }

或者您可以使用 ListView 控件 div 的 data-win-options 属性在 HTML 中以声明方式进行设置。希望对您有所帮助。

【讨论】：

谢谢你，data-win-options="{layout: {type: WinJS.UI.ListLayout}}" 完成了这项工作！