这是我的第一个 Windows 8 应用程序...在使用它之前我遇到了最后一个问题。 :)
我有一个布局设置为 GridLayout 的 ListView。加载主页时,该应用程序将 50 个项目添加到 ListView 的数据源。 ListView 需要 5-6 秒来呈现。
注意:项目添加到数据源后 5-6 秒。 XHR/AJAX 调用 + 加载需要 200-300 毫秒。
这看起来很奇怪。我在下面添加了一些代码:
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 在呈现时的样子。
有什么想法吗?
最佳答案
您是在设置 ListView 之前还是之后将项目添加到数据源?不是说就是这样,而是想知道按原样添加项目是否会导致大量流失。我会下拉项目并创建一个新的绑定(bind)列表,然后设置数据源。
我以极短的延迟将 100 多个项目加载到 listView 中。
- 用空列表设置 ListView
- 从网络中提取数据
- 使用网络调用的结果创建新的绑定(bind)列表
- 使用新列表中的新数据源更新 ListView
您的里程可能会有所不同...
关于javascript - GridLayout ListView 的渲染非常慢 - WinJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13753394/