【bug】table重新加载数据，页面滚动条下沉到底部，记录scrollTop后将其恢复scrollTop出现闪烁

1.table数据请求前记录scrollTop

$scope.scrollPos = document.documentElement.scrollTop;

 

2.html中添加指令repeat-finishi

<tr ng-repeat="item in lists" class="repeat-finish">

3.写入指令

AppDirective.directive('repeatFinish', function () {
    return {
        restrict: "C",
        link: function (scope, element, attr) {
            if(scope.$last === true){
                $(document).scrollTop(scope.scrollPos);
            }
        }
    }
});

当指令检测到DOM已经渲染好（scope.$last === true表示repeat渲染完成）立即恢复之前记录的scrollTop，这样从table加载好到恢复scrollTop就接近无延迟，闪烁的情况消失了。

注：如果有滚动条定位偏差（angular表达式编译完成呈现视图前后引起的折行，页面高度会发生变化，所以定位有差别。虽然scope.$last === true表示了遍历完成，但是页面重绘并没有完成，主要是数据绑定的显示），在link里面加个setTimeout();这是会闪烁一下；

闪烁这个现象暂时没有找到完美的解决办法，有大佬想到什么办法的话，欢迎@，E-mail: dxdleikai@163.com

 

后续：（已经找到解决办法）

指令修改为如下：

AppDirective.directive('repeatFinish', function ($parse) {
    return {
        restrict: "CA",
        link: function (scope, element, attr) {
            if(scope.$last === true){
                var watchLast = scope.$watch('lastHashKey', function(newValue, oldValue) {
                    $(document).scrollTop(scope.scrollPos);
                });
                scope.$on('$destroy', function() {
                    watchLast();
                });
            }
        }
    }
});

 

控制器需要在更新数据列表后添加：

$scope.lastHashKey = $scope.tableList[$scope.tableList.length - 1].$$hashKey)

完美解决