zoukankan      html  css  js  c++  java
  • 【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)

    完美解决

  • 相关阅读:
    迭代器,生成器的理解
    需求
    关于dom 0级 2级 3级事件的理解
    夯实前端基础
    前端面试题 收集
    前端易忘点,持续更新
    form target 文件上传
    ES6 symbol
    bzoj1260 [CQOI2007]涂色paint
    bzoj1083 [SCOI2005]繁忙的都市
  • 原文地址:https://www.cnblogs.com/bagexiaowenti/p/10570265.html
Copyright © 2011-2022 走看看