我正在尝试创建一个包含各个部分的网格应用程序,每个部分都被提取到特定的列表视图但是我遇到了一个问题,你只能有一个listview覆盖整个页面,以便正确地水平滚动里面的对象这个清单意味着没有其他的空间。这是我现在使用的代码:
WinJS.xhr({ url: "http://search.twitter.com/search.json?q=%23windows8&rpp=100}).then(
function (response) {
var json = JSON.parse(response.responseText.toString());
var list = new WinJS.Binding.List(json.result);
gridView1.winControl.itemDataSource = list.dataSource;
//gridView1 is ID of listview
}
使用上面的代码,我可以轻松地显示包含结果数组的对象的网格,然后将em绑定到列表。但是现在我想要显示不同URL的多个类似列表视图,这些URL显示为在WinJS网格应用程序中显示为默认界面的URL。
更清楚,这就是我想要的 - 使用Twitter API URL1在网格的第一部分中的Twitter用户名,然后我想在相邻的网格中使用Twitter搜索结果,所以我必须使用另一个listview b使用URL2。
如何找到解决此问题的方法。感谢您的帮助。
答案 0 :(得分:1)
是的,提出来自不同列表的所有不同项目的共同点,并将您的数据投影到单个分组列表是一种选择。你可能不想放弃你想要做的事情。如果在包含在flexbox中的页面上放置多个ListView,则滚动时不会有任何问题。如果你在ListView演示中查看我的codeSHOW应用程序,你会发现我有相同的粗略信息。 Windows实际上非常聪明地处理平移。
** 编辑 **
这是我正在谈论的一个粗略的例子。同样,您可以在codeSHOW的ListView演示中找到相关的工作示例。
<!-- HTML snippet -->
<div class="hub">
<div>
<div id="list1" data-win-control="WinJS.UI.ListView"></div>
</div>
<div>
<div id="list2" data-win-control="WinJS.UI.ListView"></div>
</div>
<div>
<div id="list3" data-win-control="WinJS.UI.ListView"></div>
</div>
</div>
/* CSS snippet */
.hub {
display:-ms-flexbox; /* this will lay the lists out horizontally */
overflow-x:auto; /* set the flexbox to scroll its overflow */
}
/* select each of the sections */
.hub > div {
padding-right:80px; /* 80px of space between "sections" */
}
/* choose whatever sizes you want for your list views. You may want to make them wide
enough that they don't scroll because it can get a little awkward to have scrolling
within scrolling */
[data-win-control=WinJS.UI.ListView] {
width: 640px;
height: 480px;
}
答案 1 :(得分:0)
您可以通过将结果集聚合到单个数据源来解决此问题。
您可以通过将数据重新分配到已使用分组功能设置的WinJS.Binding.List
来执行此操作,并以您知道如何对数据进行分组的方式对数据进行归因。可以在执行文件/新建/项目时在Visual Studio中找到的“网格”模板中找到WinJS.Binding.List
分组的示例。
或者,您可以构建自己的数据VirtualizedDataSource
- 在MSDN here上有一个很好的教程。