如何使用 angularJS 制作虚拟卷轴？

Question

我正在尝试制定一个可以进行虚拟滚动的指令，以便在用户滚动 table 时，table 删除 "old" 视图并添加 "new" 意见，有点像收集重复但我一直失败，我想我不明白背后的数学，有人可以帮助我吗？

这是我的指令代码：

BaseModule.directive('myScroll', function() {
    return {
        restrict:"A",
        scope:{
            rows:"=",
            headers:"="
        },
        link: function(scope,el) {
            var scrollTop = 0;
            var scrollLeft = 0;
            angular.element(el).on('scroll',function(){
                scrollTop = $(el).scrollTop();
                scrollLeft = $(el).scrollLeft();
                $(el).parent().find(".header").scrollLeft(scrollLeft);
                var height = $(el).height();
                var numberOfRows = height/23;
                var initialRow = scrollTop/23;
                var html = "";
                for(i=0; i<numberOfRows;i++){
                    var row = scope.rows[i+initialRow];
                    html = html + addRow(row,i+initialRow);
                }
                $(el).find('.tbody-scroll').append(html);
            });
            scope.$watch('rows',function(rows){
                var height = $(el).height();
                var numberOfRows = height/23;
                var initialRow = scrollTop/23;
                var html = "";
                for(i=0; i<numberOfRows;i++){
                    var row = rows[i+initialRow];
                    html = html + addRow(row,i+initialRow);
                }
                $(el).find('.tbody-scroll').append(html);
            });
            var addRow = function(row,index){
                var html = "";
                var pos = 0;
                var totalWidth = 0;
                angular.forEach(row,function(col){
                    var width = scope.headers[pos].width;
                    totalWidth = totalWidth + width;
                    html = html + "<span style='width:"+width+"px'>"+col.value+"</span>";
                    pos++;
                });
                html = "<div class='row' style='top:"+index*23+"px;width:"+totalWidth+"px;'>"+html;
                html = html + "</div>";
                return html;
            };
        }
    };
});

<!-- my directive .html -->
<div class="mTable">
    <div class="header" ng-style="headerWidth(headers())">
        <span ng-repeat="header in headers()" ng-style="widthStyle(header)">
            {{::header.label}}
        </span>
    </div>
    <div class="tbody-container" my-scroll headers="headers()" rows="rows()">
        <div class="tbody-scroll" ng-style="scrollHeight(rows(),headers())"></div>
    </div>
</div>

Answer 1

不是您问题的直接答案，而是替代方案：您可能想看看 ui-scroll directive，它是 ng-repeat 的替代品，具有类似的功能。

例子在你的控制器中

$scope.movieDataSource = {

    get : function (index, count, callback) {
        var i, items = [$scope.userMovies], item;

            var min = 1;
            var max = 1000;

        for (i=index ; i<index + count ; i++) {
                if(i < min || i > max) {
                    continue;
                }
            item = {
                title: $scope.userMovies.title,
                imageURL: $scope.userMovies.poster_path
            };
            items.push (item);
        }
        callback (items);
    }
}

在您看来：

<div ui-scroll="item in movieDataSource">
  {{item.title}}
</div>

Answer 2

用代码给出完整答案可能需要付出太多努力
这个库在 ng-repeat https://github.com/stackfull/angular-virtual-scroll 上实现了虚拟滚动，在描述中还有一篇关于如何自己实现这个特性的文章。

基本概念是制作两个div，一个在列表上方，一个在列表下方，其大小由列表中元素的数量决定（这种方法有一个限制，因为列表元素必须具有相同的高度或者它们的高度必须固定），然后当元素从视口中消失时删除它们，并根据当前未呈现的元素数量和您在列表中的位置调整 div 的大小

如何使用 angularJS 制作虚拟卷轴？

How can I make an virtual scroll with angularJS?

javascript

performance

directive

angularjs

virtualscroll