Javascript 使用灰盒的GridLayout预渲染-WinJS
迫不及待地想在商店中获得我的第一个应用程序!:)不幸的是,我在完成的路上遇到了一些小问题Javascript 使用灰盒的GridLayout预渲染-WinJS,javascript,css,windows-8,winjs,grid-layout,Javascript,Css,Windows 8,Winjs,Grid Layout,迫不及待地想在商店中获得我的第一个应用程序!:)不幸的是,我在完成的路上遇到了一些小问题 所有我的GridLayouts区域预渲染,灰色框向右移动。[见下图] 内容通过XHR加载,图像托管在web服务器上 当灰盒渲染时,图像也已加载。我希望图像在框渲染后加载,就像在普通网页上一样 HTML 更多CSS .groupeditemspage .groupeditemslist .win-horizontal.win-viewport .win-surface {
所有我的GridLayouts区域预渲染,灰色框向右移动。[见下图]
内容通过XHR加载,图像托管在web服务器上 当灰盒渲染时,图像也已加载。我希望图像在框渲染后加载,就像在普通网页上一样
HTML 更多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
Ebay应用程序在这方面做得很好:
知道会发生什么吗
非常感谢!:)希望我能很快启动并运行我的第一个应用程序 这是ListView默认的“后置”渲染,它通过在知道要渲染多少数据之前渲染占位符来提高感知性能
您可以使用自定义它,也可以使用禁用它。需要查看一些HTML和css以了解如何设置页面布局。看起来您正在将ListView放置在已定义左檐槽的栅格中。ListView的默认Css将为您自动创建边沟提供左边距。当您将其粘贴到有排水沟的网格中时,将得到“双偏移”。这是我的猜测,没有看到任何代码。嗨,非常感谢你的回复!它给了我一些希望。。。我已经附加了与ListView相关的代码。奇怪的是,渲染完成后。。。布局完美,没有偏移。问题在于预加载。多谢多米尼克!非常有用。你知道为什么背景会向右移动吗?可能是因为这些元素已经通过了渲染管道的背景阶段。或者,你有一个初始边距在上面滚动了那么多。没料到你会看到这些东西超过一刻,所以因为它们似乎到处都是,这有点奇怪。
.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;
}
}
.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;
}
listView.layout = new ui.GridLayout({ groupInfo: groupInfo, groupHeaderPosition: "top" });
listView.itemDataSource = Data.items.dataSource;
listView.groupDataSource = Data.groups.dataSource;