html - 垂直滚动，带 WinJS 的 ListView

Question

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

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

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

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

我还尝试将 ListView 包装在一个 div 中，该 div 使用此方法在溢出时垂直滚动:

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

Answer 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 中以声明方式进行设置。 希望对您有所帮助。