[英]GridLayout pre-rendering with grey boxes - WinJS
我等不及要在商店買到我的第一個應用了! :)不幸的是,我在完成的路上遇到了一些小問題......
我的所有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;
易趣應用程序做得很好:
知道會發生什么嗎?
非常感謝! :)希望我很快就能使用我的第一個應用程序運行!
這是ListViews默認的“后退”渲染,它通過在占位符知道渲染數據之前渲染占位符來增強感知性能。
您可以使用backdropColor自定義它並使用disableBackdrop禁用它
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.