在AngularJS中使用ngInfiniteScroll指令实现反向无限滚动 [英] Implementing a reverse infinite scroll using ngInfiniteScroll directive in AngularJS

问题描述

我想从此处使用ngInfiniteScroll指令: http://binarymuse.github.io/ngInfiniteScroll/在我的angular js应用中，以实现反向无限滚动(例如在聊天小部件中).但是，此指令的文档似乎并未提及如何实现.它仅记录如何实现标准无限滚动.有人可以在这方面指导我吗?谢谢！

I would like to use the ngInfiniteScroll directive from here: http://binarymuse.github.io/ngInfiniteScroll/ in my angular js app to implement a reverse infinite scroll (like in a chat widget). However the documentation for this directive does not seem to mention how this can be accomplished. It only documents how the standard infinite scroll is implemented. Could someone guide me in this regards? Thanks!

P.S:我热衷于使用此指令，因为它处理DOM控件；从我的角度来看，标准的无限滚动指令会在我滚动时不断创建DOM元素，但从未删除.

P.S : I'm keen on using this directive since it deals with the DOM control; the standard infinite scroll directive from angular keeps creating DOM elements as I scroll which is never deleted.

推荐答案

我认为您应该采用基于模型的方法(特别适合于角度方法) 例如，当您向上滚动并达到一个限制时，您将加载更多数据并将其插入到消息收集的开头(如果出于性能原因要限制加载的html节点的数量，也可以删除最新数据).

I think you should rather have a model based approach (which fits particularly to angular) ie when you scroll up and reach a limit, you load more data and insert them at the beginning of your messages collection (you could also remove the most recent if you want to limit the amount of html nodes loaded for performance reason).

这是我与 lrInfiniteScroll

根本没有dom操作，它只是检测何时向下滚动并到达底部(带有反跳)并触发绑定的处理程序，因此您可以做任何您想做的事情，尤其是更改模型:您的应用程序仍然是模型驱动

There is no dom manipulation at all, it just detects when you scroll down and reach the bottom (with a debounce) and trigger an handler you have bound so you can do whatever you want, and particularly change your model: your application remains model driven

我已经稍微改变了逻辑以具有向上滚动的行为，但是这个想法保持不变

I have change the logic a bit to have the scroll up behavior, but the idea remain the same

(function (ng) {
'use strict';
var module = ng.module('lrInfiniteScroll', []);

module.directive('lrInfiniteScroll', ['$timeout', function (timeout) {
    return{
        link: function (scope, element, attr) {
            var
                lengthThreshold = attr.scrollThreshold || 50,
                timeThreshold = attr.timeThreshold || 400,
                handler = scope.$eval(attr.lrInfiniteScroll),
                promise = null,
                lastScrolled = -9999;

            lengthThreshold = parseInt(lengthThreshold, 10);
            timeThreshold = parseInt(timeThreshold, 10);

            if (!handler || !ng.isFunction(handler)) {
                handler = ng.noop;
            }

            element.bind('scroll', function () {

                var scrolled = element[0].scrollTop;
                //if we have reached the threshold and we scroll up
                if (scrolled < lengthThreshold && (scrolled - lastScrolled) < 0) {
                    //if there is already a timer running which has no expired yet we have to cancel it and restart the timer
                    if (promise !== null) {
                        timeout.cancel(promise);
                    }
                    promise = timeout(function () {
                        handler();
                        //scroll a bit againg
                        element[0].scrollTop=element[0].clientHeight/2;
                        promise = null;
                    }, timeThreshold);
                }
                lastScrolled = scrolled;
            });


            //scroll first to the bottom (with a delay so the elements are rendered)
            timeout(function(){
                element[0].scrollTop=element[0].clientHeight;
            },0);
        }

    };
}]);
})(angular);

还有一个运行示例

这篇关于在AngularJS中使用ngInfiniteScroll指令实现反向无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！