我有一个包含 ListView
的 WinJs metro 应用程序具有可变高度的元素。它基本上与 "HTML ListView item templates" sample 中的场景 4 中的方法相同。 .一个 groupInfo
函数用于启用 GridLayout
的单元格跨度与 ListView 相关联:
现在在我的应用程序的快照 View 中,我希望项目垂直滚动,因此我尝试替换 GridLayout
与 ListLayout
.这会导致垂直滚动,但现在单元格跨度丢失并且项目重叠:
我用了 groupInfo
功能与 GridLayout
相同,但似乎被忽略了:
layout: {
groupInfo: groupInfo,
type: WinJS.UI.ListLayout
}
有没有办法在
ListLayout
中使用可变大小的项目? ?我的一些项目比其他项目的内容更多,我真的很想使用不同大小的图块来最佳地显示所有内容。
最佳答案
old post
Yes you certainly can customize everything. I think your render problem come from this you may have forget, the
forceLayout
.ready: function (element, options) { element.querySelector("#listView").winControl.forceLayout(); }
I don't have my Windows 8 near from me so if no one else reply and the problem didn't come from the
forceLayout
I'll update the response by the night.I hope this help.
好的,所以我之前误解了你的问题。
这里有一些应该让你满意的东西。
问题是您必须在 JavaScript 和 CSS 文件中管理应用程序的不同 View 状态。
因此,关于 JavaScript,我使用了两个可以在 Grid Application 模板中找到的函数,例如。所以我修改了scenario4.js 来获取这段代码。
function MyCellSpanningJSTemplate(itemPromise) {
return itemPromise.then(function (currentItem) {
var result = document.createElement("div");
// Use source data to decide what size to make the
// ListView item
result.className = currentItem.data.type;
result.style.overflow = "hidden";
// Display image
var image = document.createElement("img");
image.className = "regularListIconTextItem-Image";
image.src = currentItem.data.picture;
result.appendChild(image);
var body = document.createElement("div");
body.className = "regularListIconTextItem-Detail";
body.style.overflow = "hidden";
result.appendChild(body);
// Display title
var title = document.createElement("h4");
title.innerText = currentItem.data.title;
body.appendChild(title);
// Display text
var fulltext = document.createElement("h6");
fulltext.innerText = currentItem.data.text;
body.appendChild(fulltext);
return result;
});
}
var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
var appView = Windows.UI.ViewManagement.ApplicationView;
var ui = WinJS.UI;
(function () {
"use strict";
var page = WinJS.UI.Pages.define("/html/scenario4.html", {
initializeLayout: function (listView, viewState) {
/// <param name="listView" value="WinJS.UI.ListView.prototype" />
if (viewState === appViewState.snapped) {
listView.layout = new ui.ListLayout();
}
else {
listView.layout = new ui.GridLayout({ groupInfo: groupInfo });
}
},
ready: function (element, options) {
var listView = element.querySelector("#listView").winControl;
this.initializeLayout(listView, appView.value);
},
updateLayout: function (element, viewState, lastViewState) {
var listView = element.querySelector("#listView").winControl;
if (lastViewState !== viewState) {
if (lastViewState === appViewState.snapped || viewState === appViewState.snapped) {
this.initializeLayout(listView, viewState);
}
else {
listView.layout = new ui.GridLayout({ groupInfo: groupInfo });
}
}
}
});
})();
然后我删除了整个
layout
因为我在上面的Scene4.js中创建了布局,所以在scene4.html中listview的属性因此,您的 ListView 根据 View 状态使用不同的布局,但您将获得与之前相同的结果(顺便说一句,您必须在处于捕捉模式时更改场景才能查看结果)。
所以我们只需要根据 View 状态更新Scene4.css,并且在CSS 3 中我们有媒体查询允许我们这样做。
然后取决于这里的 View 状态
snapped
我们将覆盖我们的属性。你只需要将下面的代码添加到你的场景4.css@media screen and (-ms-view-state: snapped) {
#listView {
max-width: 260px;
height: 280px;
border: solid 2px rgba(0, 0, 0, 0.13);
}
.regularListIconTextItem {
max-width: 250px;
max-height: 70px;
padding: 5px;
overflow: hidden;
display: -ms-grid;
}
.smallListIconTextItem {
max-width: 250px;
max-height: 70px;
padding: 5px;
overflow: hidden;
background-color: Pink;
display: -ms-grid;
}
/* Medium size */
.mediumListIconTextItem {
max-width: 250px;
max-height: 70px;
padding: 5px;
overflow: hidden;
background-color: LightGreen;
display: -ms-grid;
}
/* Large size */
.largeListIconTextItem {
max-width: 250px;
max-height: 70px;
padding: 5px;
overflow: hidden;
background-color: LightBlue;
display: -ms-grid;
}
}
希望这次有帮助;)
关于listview - 在 ListLayout 中显示具有可变高度的项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11263810/