迫不及待地想在商店中获得我的第一个应用程序！:) 不幸的是，我在完成的过程中遇到了一些小问题......
我所有的 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 应用程序在这方面做得很好：
- 框几乎立即渲染，没有灰框。
- 图像加载。
知道会发生什么吗？
非常感谢！:) 希望我很快就能启动并运行我的第一个应用程序！