迫不及待想要在商店买到我的第一个应用程序! :)不幸的是,我在完成的路上遇到了一些小问题......
我的所有GridLayouts区域都预渲染,灰色框向右移动。 [见下图]
内容通过XHR加载,图像托管在Web服务器上。
当灰色框渲染时,图像也已加载。我希望在渲染的框之后加载图像,因为它发生在常规网页上。
HTML
<div class="fragment groupeditemspage">
<header aria-label="Header content" role="banner">
...
</header>
<section role="separator">
</section>
<section aria-label="Main content" role="main" id="home-list-views">
<div class="groupeditemslist win-selectionstylefilled" id="homeItems" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none', maxRows: 4 }"></div>
</section>
</div>
CSS
.groupeditemspage section[role=main] {
-ms-grid-row: 3;
-ms-grid-row-span: 3;
display: -ms-flexbox;
-ms-flex-direction: row;
height: 100%;
overflow-x: auto;
position: relative;
width: 100%;
z-index: 0;
}
#collection-list-view-container{
column-fill: auto;
column-gap: 15px;
column-width: auto;
margin-left: 120px;
margin-top: 20px;
width: auto;
height: 80%;
.win-listview{
margin-top: 15px;
height: 100%;
}
.win-surface{
margin: 0px;
}
}
更多CSS
.groupeditemspage .groupeditemslist .win-horizontal.win-viewport .win-surface {
margin-bottom: 60px;
margin-left: 45px;
margin-right: 115px;
//margin-top: 128px;
margin-top: 20px;
}
.groupeditemspage .groupeditemslist .win-groupheader {
padding: 0;
}
/* Use grid and top level layout for truncation */
.groupeditemspage .groupeditemslist .group-header {
-ms-grid-columns: minmax(0, max-content) 7px max-content;
-ms-grid-rows: max-content;
display: -ms-inline-grid;
line-height: 1.5;
}
/* Override default button styles */
.groupeditemspage .groupeditemslist .group-header, .group-header:hover, .group-header:hover:active {
background: transparent;
border: 0;
margin-bottom: 1px;
margin-left: 5px;
margin-right: 5px;
margin-top: 1px;
min-height: 0;
padding: 0;
}
.groupeditemspage .groupeditemslist .group-header .group-title {
display: inline-block;
}
.groupeditemspage .groupeditemslist .group-header .group-chevron {
-ms-grid-column: 3;
display: inline-block;
}
.groupeditemspage .groupeditemslist .group-header .group-chevron::before {
content: "\E26B";
font-family: 'Segoe UI Symbol';
}
.groupeditemspage .groupeditemslist{
.win-item{
box-shadow: 0px 0px 10px 3px #ddd;
}
.win-container {
margin-bottom: 1px;
margin-left: 1px;
margin-right: 1px;
margin-top: 1px;
}
}
.groupeditemspage .groupeditemslist .item {
-ms-grid-columns: 1fr;
-ms-grid-rows: 1fr 90px;
display: -ms-grid;
height: 128px*2-2px;
width: 128px*2-2px;
border: 1px solid #ddd;
.item-image{
}
&.product{
//height: 128px-2px;
//width: 128px-2px;
height: 128px-2px-5px;
width: 128px-2px-5px;
-ms-grid-rows: 1fr 25px;
.item-overlay{
-ms-grid-row: 2;
background: white;
text-align: center;
opaciy: 0.9;
span.icon-star{
color: orange;
}
}
.item-image{
-ms-grid-row: 1;
text-align: center;
//height: 100%;
//-ms-grid-row-span: 1;
img{
height: 140px;
width: 140px;
}
}
}
&.category{
//height: 128px-2px;
//width: 128px*2-2px;
height: 128px-2px;
width: 256px-2px;
-ms-grid-rows: 1fr 40px;
.item-overlay{
//display: none;
background: #111;
color: white;
//font-weight: bold;
//font-size: 24px;
width: 100%;
opacity: 0.95;
padding: 8px 15px;
h4{
width: 100%;
font-size: 18px;
}
}
.item-image{
-ms-grid-row-span: 2;
}
}
&.collection{
//-ms-grid-columns: 1fr;
-ms-grid-rows: 1fr 40px;
//display: -ms-grid;
//height: 128px-2px;
//width: 128px*2-2px;
height: 165px-2px;
width: 220px-2px;
&.big{
//height: 128px*2-2px;
//width: 128px*4-4px+20px;
height: 165px*2-2px+2px;
width: 220px*2-2px+2px;
-ms-grid-rows: 1fr 50px;
.item-overlay{
h4{
font-size: 26px;
}
h6{
font-size: 18px;
}
}
}
.item-overlay{
-display: none;
background: #111;
color: white;
//font-weight: bold;
//font-size: 24px;
width: 100%;
opacity: 0.95;
padding: 5px 15px;
h4{
width: 100%;
font-size: 18px;
}
}
.item-image{
-ms-grid-row-span: 2;
}
}
}
.groupeditemspage .groupeditemslist .item .item-overlay {
//-ms-grid-row: 2;
//-ms-grid-rows: 1fr 21px;
//display: -ms-grid;
//padding: 6px 15px 2px 15px;
}
.groupeditemspage .groupeditemslist .item .item-overlay .item-title {
//-ms-grid-row: 1;
overflow: hidden;
width: 220px;
}
.groupeditemspage .groupeditemslist .item .item-overlay .item-subtitle {
//-ms-grid-row: 2;
width: 220px;
}
.groupeditemspage .groupeditemslist .largeitemtemplate .item{
width: 500px + 10px;
height: 500px + 10px;
}
/* Generic styling */
.groupeditemspage .groupeditemslist .item-overlay {
-ms-grid-row: 2;
}
.groupeditemspage .groupeditemslist .item-overlay .item-description {
visibility:collapse;
}
JS
listView.layout = new ui.GridLayout({ groupInfo: groupInfo, groupHeaderPosition: "top" });
listView.itemDataSource = Data.items.dataSource;
listView.groupDataSource = Data.groups.dataSource;
Ebay应用程序做得非常好:
知道会发生什么事吗?
非常感谢! :)希望我很快就会启动并运行我的第一个应用程序!
答案 0 :(得分:2)
这是ListViews默认的“后退”渲染,它通过在占位符知道渲染数据之前渲染占位符来增强感知性能。
您可以使用backdropColor对其进行自定义,并使用disableBackdrop
将其停用