0

我正在研究每 2 分钟刷新一次的 ListView。列表视图使用多个模板（使用自定义 itemTemplate 函数分配）

由于我在列表视图中有多个模板，我不能简单地使用 dataSource.change 函数更新数据。我必须重置数据源，以便根据最新数据它应该能够再次选择正确的模板。

但是，当我重新分配 dataSource 时，会出现令人分心的闪烁动画。我想摆脱那个动画。

var listView = element.querySelector('.my-list-view').winControl;
var list = new WinJS.Binding.List(data);
listView.itemTemplate = function (itemPromise) {
    return itemPromise.then(function (item) {
        var container = document.createElement("div");
        var itemTemplate;
        switch (item.data.status) {
            case "Final":
                itemTemplate = element.querySelector(".final-template");
                break;

            case "NotFinal":
                itemTemplate = element.querySelector(".not-final-template");
                break;
        }

        itemTemplate.winControl.render(item.data, container);
        container.style.height = '120px';
        container.style.width = '380px';
        return container;
    });
};
listView.itemDataSource = list.dataSource;
listView.addEventListener("contentanimating", function (e) { e.preventDefault() });
4

2 回答 2

1

为什么一定要重置数据？如果您使用多个模板，则在需要渲染项目时调用 itemTemplate 渲染函数 - 如果您更改了项目并导致在基础数据集中添加或替换它，则列表视图可以对这可以调用您的项目模板。这比要求列表视图再次呈现所有数据的性能要高得多——尤其是在 ARM 等低端设备上。

有关 itemTemplate 渲染函数的详细信息，请参阅此处的“使用模板或渲染函数显示项目”部分。

但是，如果这仍然对您不起作用，您可以通过处理“contentanimating”事件来禁用列表视图中的动画，并preventDefault()在事件对象引发时调用它。例如

var myListview = /* get listview control some how */
myListView.addEventListener("contentanimating", function(e) { e.preventDefault() });

如果您的代码比 listview 实例的寿命更长，请记住分离侦听器。

于 2012-09-11T15:53:38.963 回答
1

您可以随时使用禁用动画，WinJS.UI.disableAnimations();然后在重置完成后再次启用它们，在ListView LoadingState.

于 2013-05-04T22:52:46.783 回答