Question

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

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

但是当我重新分配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() });

Answer 1

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

有关itemTemplate渲染功能的详细信息，请参阅“使用模板显示项目或渲染功能”here。

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

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

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

Answer 2

您可以随时使用WinJS.UI.disableAnimations();停用动画，然后在重置完成后再次启用动画，这些动画位于ListView LoadingState上。

WinJS - 项目更新时禁用ListView动画

2 个答案: