我正在使用 HTML5/CSS/JS 为 Windows 8 开发 Metro 风格应用程序
我正在尝试在分组列表视图中显示不同大小的项目。（就像所有地铁风格的应用程序一样......）我在互联网上发现我需要将一个 GridLayout 放到我的列表视图中并实现 groupInfo。它成功修改了第一项（第一项内的图片比其他项大），但是所有项都具有第一项的大小。我想要这样的东西：
这是我所做的：
updateLayout: function (element, viewState, lastViewState) {
//I get my listView winControl defined in HTML
var listView = element.querySelector(".blocksList").winControl;
var globalList = new WinJS.Binding.List(globalArray);
var groupDataSource = globalList.createGrouped(this.groupKeySelector,
this.groupDataSelector, this.groupCompare);
// I set the options of my listView (the source for the items and the groups + the grid Layout )
ui.setOptions(listView, {
itemDataSource: groupDataSource.dataSource,
groupDataSource: groupDataSource.groups.dataSource,
layout: new ui.GridLayout({
groupHeaderPosition: "top",
groupInfo: function () {
return {
multiSize: true,
slotWidth: Math.round(480),
slotHeight: Math.round(680)
};
}
}),
itemTemplate: this.itemRenderer,
});
},
// je définis le template pour mes items
itemRenderer: function (itemPromise) {
return itemPromise.then(function (currentItem, recycled) {
var template = document.querySelector(".itemTemplate").winControl.renderItem(itemPromise, recycled);
template.renderComplete = template.renderComplete.then(function (elem) {
//if it is the first item I put it widder
if (currentItem.data.index == 0) {
// elem.querySelector(".item-container").style.width = (480) + "px";
elem.style.width = (2*480) + "px";
}
});
return template.element;
})
},
html部分是：
<section aria-label="Main content" role="main">
<div class="blocksList" aria-label="List of blocks" data-win-control="WinJS.UI.ListView"
data-win-options="{itemTemplate:select('.itemTemplate'), groupHeaderTemplate:select('.headerTemplate')
, selectionMode:'none', swipeBehavior:'none', tapBehavior:'invoke'}">
</div>
</section>
<!--Templates-->
<div class="headerTemplate" data-win-control="WinJS.Binding.Template">
<div class="header-title" data-win-bind="innerText: categorieName"/>
</div>
<div class="itemTemplate" data-win-control="WinJS.Binding.Template">
<div class="item-container" >
<div class="item-image-container">
<img class="item-image" data-win-bind="src: urlImage" src="#" />
</div>
<div class="item-overlay">
<h4 class="item-title" data-win-bind="textContent: title"></h4>
</div>
</div>
</div>
等 css
.newHomePage p {
margin-left: 120px;
}
.newHomePage .blocksList {
-ms-grid-row: 2;
}
.newHomePage .blocksList .win-horizontal.win-viewport .win-surface {
margin-left: 120px;
margin-bottom: 60px;
}
.newHomePage .blocksList .item-container {
height: 340px;
width: 240px;
color: white;
background-color: red;
-ms-grid-columns: 1fr;
-ms-grid-rows: 1fr;
display: -ms-grid;
}
.newHomePage .blocksList .win-item {
/*-ms-grid-columns: 1fr;
-ms-grid-rows: 1fr 30px;
display: -ms-grid;*/
height: 130px;
width: 240px;
background: white;
outline: rgba(0, 0, 0, 0.8) solid 2px;
}
谢谢您的帮助。