Question

有一些项目并想要水平显示它们，并且当空间不足时需要它们换行到下一行。

<div class="historyItem">
    <div id="testTemplate" data-win-control="WinJS.Binding.Template" style="display:none">
        <div class="itemTemp">
            <h6  data-win-bind="innerText: desc"></h6>
        </div>
    </div>
</div>
<div id="listViewForecast"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{itemTemplate:testTemplate, selectionMode: 'none', tapBehavior: 'none', swipeBehavior:'none',  layout: {groupInfo: groupInfo, type: WinJS.UI.GridLayout}}"
    >
</div>

现在我不知道如何使它'水平'但我知道你应该能够做到这一点，因为ListView上有一个属性，如果列表在这里是http://msdn.microsoft.com/en-us/library/windows/apps/br211788.aspx，则返回一个布尔值。我也可以使用GridView，但即便是首先垂直显示项目。

Answer 1

ListView将始终垂直布局内容项。即使使用GridLayout，项目依次填充每列。

定义了一个水平属性，但是如果你看一下ui.js中的源代码，你会看到它被硬编码为GridLayout为真，而ListLayout为false。

Answer 2

想出来。答案是here。为ListView控件指定自己的高度并使其更宽。确保它只有足够高才能容纳一个项目，而下一个项目将被抛出右侧。在我的情况下，我有固定数量的项目，并将工作正常。这可能不适用于可变数量的项目。

只需将以下类添加到html中并指定宽度和高度即可。页面中的所有ListView都使用此类进行样式设置。

.win-listview 
{
    height: 500px; 
    width: 500px; 
    border: 2px solid gray;
}

WinJS.UI.ListView水平

2 个答案: