使用winjs检测listview上的滚动事件答案

【问题标题】：Detect scrolling event on listview with winjs使用winjs检测listview上的滚动事件
【发布时间】：2014-11-04 21:25:40
【问题描述】：

用户滚动到列表视图的末尾时，我需要加载更多项目。

我尝试使用 microsoft 示例：http://code.msdn.microsoft.com/windowsapps/ListView-loading-behaviors-718a4673/view/SourceCode（场景 2）但它接缝列表视图在 windows phone 8.1 中的行为不同。

当我运行示例时，我可以看到只加载了可查看的内容（例如 50 个项目中的 5 个项目）。但对于 Windows Phone，它确实会加载所有项目。

我使用这个代码：

listView.winControl.itemTemplate = this.incrementalTemplate;
incrementalTemplate: function (itemPromise, recycledElement) {
    if (!recycledElement) {
        recycledElement = document.createElement('div');
    }
    var renderComplete = itemPromise.then(function (item) {

        console.log(item.index);


        itemTemplate.winControl.render(item.data, recycledElement);
        return item.ready;
    }).done(function (item) {
        console.log("clp"+item.index);

    });
    return { element: recycledElement, renderComplete: renderComplete };
},

项目是异步加载的。我可以在我的控制台中看到它打印了 50 倍的索引和 50 倍的 clp+index。即使我的列表一次只显示 5 个项目。

似乎我的列表视图从未触发加载状态事件

listView.addEventListener("loadingstatechanged", function (args) {
    //never fired
}, false);

【问题讨论】：

标签： winjs windows-phone-8.1

【解决方案1】：

列表视图在一个集线器中，解决方案是在 win pivot 项目上添加一个 onscroll 事件：

 document.querySelector(".win-pivot-item-content").onscroll = function () {
                if (self.scrollAtBottom(this) === true) {
                    //load more
                }
            };

   scrollAtBottom : function(element){
        return element.scrollHeight - element.scrollTop === element.clientHeight
    },

【讨论】：

【解决方案2】：

如果您想在ListView 滚动时订阅事件，您可以使用ListView's Scrollviewer 并订阅ViewChanged 事件。唯一的问题是我不知道它在winjs 中会是什么样子，在C# 中它可能看起来像这样：

// method to pull out a ScrollViewer
public static ScrollViewer GetScrollViewer(DependencyObject depObj)
{
    if (depObj is ScrollViewer) return depObj as ScrollViewer;

    for (int i = 0; i < VisualTreeHelper.GetChildrenCount(depObj); i++)
    {
        var child = VisualTreeHelper.GetChild(depObj, i);

        var result = GetScrollViewer(child);
        if (result != null) return result;
    }
    return null;
}

// subscription:
GetScrollViewer(yourListView).ViewChanged += yourEvent_ViewChanged;

也许会有所帮助。

【讨论】：

奇怪，在我的情况下它是空的。当 HeaderTemplate、FooterTemplate 和 ItemsTemplate 全部设置时，这在 Windows Phone 8.1 中是否仍然正确？
@MichaelK.Sondej 在您的情况下，null 是什么？什么时候调用这个方法？
是的，我把它放在页面构造函数的 InitializeComponents 之后，这是一个错误。将代码移动到 LoadState（我正在使用 NavigationHelper）后，它可以正常工作。谢谢。

【解决方案3】：

这里投票的评论作为解决方案不能像开箱即用那样工作，但是我从那开始找到了解决这个问题的方法。请参阅我在https://github.com/winjs/winjs/issues/690#issuecomment-61637832 上打开的问题的第一个答案（包括代码 sn-p）

【讨论】：