我尝试在动态内容上实现“固定”滚动，我的工作示例 here .这个工作，但是当添加新元素时我看到小的“闪烁”，这是基于超时 0，但是没有这个超时示例在尝试添加新的 50 个元素时不起作用。我也不能使用虚拟/自定义滚动，就像在 ionic example 中一样.这应该是原生的 html 滚动。
有人想过如何解决这个问题吗？
HTML:
<body ng-app="demoApp">
<div ng-controller="TestCtrl">
<div id="first">
<list item-source="items" id="list"></list>
</div>
<div>
Total: {{items.length}}
<button type="button" ng-click="prepend(1);">Prepend (1)</button>
</div>
</div>
</body>
js:
(function(angular) {
var app = angular.module('demoApp', []).controller('TestCtrl', function($scope) {
$scope.items = [];
$scope.count = 0;
$scope.manualCount = 0;
$scope.prepend = function(count){
for(var i = 1; i <= count; i++){
$scope.count++;
$scope.items.unshift({
imageSrc: 'http://placehold.it/90x140&text='+$scope.count
});
}
};
}).directive('list', ['$timeout', function($timeout){
return {
restrict: "EA",
transclude: false,
replace: false,
template: '<div id="list_wrapper"><div list-item ng-repeat="item in itemSource track by $index" class="item"><img ng-src="{{item.imageSrc}}"/></div></div>',
scope: {
itemSource: '='
},
compile: function(){
return {
pre: function(scope, element, attrs, ctrl){
ctrl.setElement(element[0]);
}
};
},
controller: function($scope){
var element = '';
$scope.linesCount = 0;
var colcount = 3;
this.setElement = function(el){
element = el;
};
this.addItem = function(item){
var newLinesCount = Math.ceil($scope.itemSource.length / colcount);
var linesInserted = newLinesCount - $scope.linesCount;
if(linesInserted > 0){
var prevScroll = element.scrollTop;
$timeout(function(){
var newScroll = prevScroll + (item.clientHeight * linesInserted);
element.scrollTop = newScroll;
}, 0);
}
$scope.linesCount = newLinesCount;
};
}
};
}]).directive('listItem', [function(){
return {
require: "^list",
link: function(scope, element, attributes, listCtrl){
listCtrl.addItem(element[0]);
}
};
}]);
})(window.angular);
最佳答案
请将 $timeout 替换为 $scope.$evalAsync 以在后台异步执行操作。
代码
$scope.$evalAsync(function() {
var newScroll = prevScroll + (item.clientHeight * linesInserted);
element.scrollTop = newScroll;
});
关于javascript - angularjs ng-repeat 实现滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28924482/