windows-8 - 如何以编程方式更改 winjs 列表视图的列表视图项大小？

Question

我有模板与我正在使用 html5 和 javascript 开发的 windows 商店应用程序中的列表视图绑定。我需要以编程方式更改列表视图项的大小。基本上我的页面上有一个输入类型范围。用户将更改输入的值，根据该值我应该能够以编程方式更改列表视图项的大小。

任何帮助或指针将不胜感激。

提前致谢！

Answer 1

我知道这很旧，但我刚刚花了几个小时进行广泛的测试（因为我不想切换到网格模式），我找到了一种非常简单的方法，可以让你拥有任何高度的物品而不会重叠，我虽然我会分享它，但您需要做的就是将其添加到您的 css 中：

.win-listview .win-listlayout .win-container { 
    height:auto; 
}

Answer 2

您可以使用模板中项目上设置的类来设置列表视图中项目的大小。你可以：

1. 为您想要的不同尺寸定义不同的类

2. 在 CSS 中定义尺寸。例子：

   .small {
       height: 150px;
       width: 150px;
   }
   
   .large {
       height: 300px;
       width: 300px;
   }
   

3. 在模板项上设置适当的类：

   var templateItem = document.querySelector("#regularListIconTextTemplate .regularListIconTextItem");
   WinJS.Utilities.addClass(templateItem, "large");
   

4. 刷新列表视图：

   element.querySelector("#listView").winControl.forceLayout();