我正在尝试做出可以进行虚拟滚动的指令,因此当用户滚动表时,该表会删除“旧”视图并添加“新”视图,有点像重复收集,但是我一直失败了,我想我不明白它背后的数学原理,有人可以帮我吗?
这是我的指令代码:
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>
使用代码给出完整的答案可能需要太多的工作该库在描述中的ng-repeat https://github.com/stackfull/angular-virtual-scroll上实现了虚拟滚动,还有关于如何自行实现此功能的文章。
基本概念是在列表的上方和下方各设置两个div,其大小取决于列表中元素的数量(此方法有一个局限性,因为列表元素必须具有相同的高度或高度必须固定),然后删除元素从视口中消失后再删除它们,并根据当前未渲染的元素数量和您在列表中的位置调整div的大小。
不是您问题的直接答案,而是另一种选择:您可能希望查看ui-scroll directive,它是ng-repeat的替代品,并且具有类似的功能。