WinJS.UI.ListView水平 [英] WinJS.UI.ListView horizontal

问题描述

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

Have a few items and want to display them horizontally and need them to wrap to next line when not enough space.

<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，但即便是首先垂直显示项目。

Now I'm not sure how to make it 'horizontal' but I know you should be able to do it as there is a property on ListView that returns a boolean if the list is horizontal here http://msdn.microsoft.com/en-us/library/windows/apps/br211788.aspx. I'm OK with using a GridView too but even that is displaying items vertically first.

推荐答案

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

Figured it out. Answer is here. Specify your own height for the ListView control and make it wider. Make sure it is only high enough to hold only one item and the next item will be thrown on the right. In my case, I have fixed number of items and will work fine. This may not work for variable number of items.

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

Just add the following class to your html and specify your width and height. All ListViews in your page are styled using this class.

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

这篇关于WinJS.UI.ListView水平的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！