非常缓慢的GridLayout ListView渲染 - WinJS

这是我第一个Windows 8应用程序......我在开始使用它之前遇到了最后一个问题。 :)非常缓慢的GridLayout ListView渲染 - WinJS

我有一个ListView与布局设置为GridLayout。加载主页面时，应用程序将50个项目添加到ListView的数据源中。 ListView需要5-6秒才能呈现。

注意：项目已添加到dataSource后5-6秒。 XHR/AJAX调用+加载需要200-300ms。

这似乎很奇怪。我已经添加了下面的一些代码：

JS - 定义ListView和数据源

this.categoryProducts = new WinJS.Binding.List(); 
this.productListview = element.querySelector('#category-products-listview').winControl; 
this.productListview.itemTemplate = element.querySelector('#product-template'); 
this.productListview.itemDataSource = this.categoryProducts.dataSource; 
this.productListview.oniteminvoked = this._product_clicked.bind(this);

JS - 添加项目数据源

_ref = data.products; 
_results = []; 
for (_i = 0, _len = _ref.length; _i < _len; _i++) { 
    product = _ref[_i]; 
    _results.push(Category.categoryProducts.push(product)); 
}

HTML：

<div id="product-template" data-win-control="WinJS.Binding.Template"> 
    <div class="item product"> 
     <img class="item-image" src="/images/shopping-bag.png" data-win-bind="src: thumbnail; alt: name" onError="this.src='/images/shopping-bag.png';" /> 

     <div class="item-details" > 
      <div class="item-details-top"> 
       <h4 class="item-title" data-win-bind="textContent: name"></h4> 

      </div> 
      <div class="item-details-bottom"> 
       <div class="price"> <span style="font-weight:bold;">$</span> <span data-win-bind="textContent: price"></span></div> 
       <div class="reviews" ><span class="icon-comments"></span> <span data-win-bind="textContent: reviews_count"></span></div> 
       <div class="stars" > <span class="icon-star"></span><span class="icon-star"></span><span class="icon-star"></span><span class="icon-star"></span><span class="icon-star"></span> <span data-win-bind="textContent: stars"></span></div> 
      </div> 
     </div> 
    </div> 
</div>

这就是ListView呈现时的样子。

enter image description here

任何想法的家伙？

来源

2012-12-06 RadiantHex

如果在将数据源传递给列表视图之前将所有项添加到数据源中，该怎么办？ –

在设置ListView之前或之后，您是否将项目添加到数据源？不是这样说的，而是想知道如果你按照自己的方式添加项目，你会得到很多流失。我会拉下项目并创建一个新的绑定列表，然后设置数据源。

我已经将100个物品加载到listView中，延迟时间最短。

从网页设置的ListView与空List
提取数据
创建与网络电话
更新ListView控件与新的List

您的里程新的数据源结果新绑定列表可能会有所不同...

来源

2012-12-06 22:33:32

奇怪的是...那有效！第一列几乎立即加载，其他列延迟。另外...我必须感谢你的Youtube视频！在开发的头几天，他们真的帮助我。 :) – RadiantHex

道歉拉扯了一下......但会有任何想法为什么只有第一列会立即加载？其他专栏仍有延误。谢谢：） – RadiantHex

非常缓慢的GridLayout ListView渲染 - WinJS

回答

相关问题