6

仮想スクロールを実行できるディレクティブを作成しようとしているので、ユーザーがテーブルをスクロールすると、テーブルは「古い」ビューを削除し、「新しい」ビューを追加します。コレクションの繰り返しのようなものですが、失敗しています。その背後にある数学を理解していなかったと思います。誰か助けてもらえますか?

これは私のディレクティブコードです:

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>
4

2 に答える 2

7

コードで完全な答えを出すには、少し手間がかかるかもしれません
このライブラリは、ng-repeat で仮想スクロールを実装しています https://github.com/stackfull/angular-virtual-scrollの説明には、実装方法に関する記事もありますこの機能を自分で。

基本的な概念は、リストの上と下に 1 つずつ、合計 2 つの div を作成することです。そのサイズは、リスト内の要素の数によって決まります (リストの要素はすべて同じ高さであるか、高さが同じである必要があるため、この方法には制限があります)。ビューポートから要素が消えたら削除し、現在レンダリングされていない要素の数とリスト上の位置に応じて div のサイズを変更します。

于 2015-10-21T12:38:05.760 に答える