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)

完美解决

【bug】table重新加载数据,页面滚动条下沉到底部,记录scrollTop后将其恢复scrollTop出现闪烁的更多相关文章

  1. [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...

  2. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

  3. easyui datagrid 异步加载数据时滚动条有时会自动滚到最底部的问题

    在使用easyui 的datagrid异步加载数据时发现滚动条有时会自动滚到最底部.经测试发现,如果加载数据前没有选中行则不会出现这个问题.这样我们可以在重新异步加载数据前取消选中行就可以避免这个问题 ...

  4. table+ajax加载数据

    //ajax加载notice $(function() { //${pageContext.request.contextPath}/ /** var res = [ {noticeTitle:'必答 ...

  5. 使用 jQuery Ajax 在页面滚动时从服务器加载数据

    简介 文本将演示怎么在滚动滚动条时从服务器端下载数据.用AJAX技术从服务器端加载数据有助于改善任何web应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用 ...

  6. 淘宝购物车页面 智能搜索框Ajax异步加载数据

    如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...

  7. jQuery 滚动条 滚动到底部(下拉到底部) 加载数据(触发事件、处理逻辑)、分页加载数据

    1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...

  8. 【重大bug】viewpager使用的时候加载数据应该在setOnPageChangeListener里加载

    [重大bug]viewpager使用的时候加载数据应该在setOnPageChangeListener里的onPageSelected里加载,我说怎么首页有数据,第二页就是空白,就是加载了但是数据不显 ...

  9. Ajax页面的加载数据与删除

    1.数据库找一张表: 颜色表2.主页面主页面的代码用到tbody:TBODY作用是:可以控制表格分行下载,从而提高下载速度.(网页的打开是先表格的的内容全部下载完毕后,才显示出来,分行下载可以先显示部 ...

随机推荐

  1. swoole I/O 模型

    I/O即Input/Output,输入和输出的意思.在计算机的世界里,涉及到数据交换的地方,比如磁盘.网络等,就需要I/O接口. 通常,I/O是相对的.比如说你打开浏览器,通过网络I/O获取我们网站的 ...

  2. Pwnable.tw start

    Let's start the CTF:和stdin输入的字符串在同一个栈上,再准确点说是他们在栈上同一个地址上,gdb调试看得更清楚: 调试了就很容易看出来在堆栈上是同一块地址.发生栈溢出是因为:r ...

  3. 使用 KM 处理 HHKB 方向键

    对于上了 HHKB 这条贼船的人来说,刚开始使用起来最大的别扭可能就是没有方向键的问题了. 最早的我使用 Karabiner 来解决,里边有一些内置的组合可以替代方向键,我用 control + hj ...

  4. L53-Maximum-Subarray

    题目描述 Find the contiguous subarray within an array (containing at least one number) which has the lar ...

  5. kali pinyin

    重装了kali,原来一直用的ibus pinyin重装之后再apt-get install的时候总是找不到包,换了各种源都不行,纠结N久果断换别的输入法了. apt-get install fcitx ...

  6. Python——6切片

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...

  7. Cenots 7 通过Yum 安装Node.js 报错问题

    环境:CentOS Linux release 7.3.1611 (Core) 安装报错信息: [cenots7@localhost ~]$ sudo yum -y install npm Loade ...

  8. 如何正确使用redis分布式锁

    前言   笔者在公司担任技术面试官,在笔者面试过程中,如果面试候选人提到了reids分布式锁,笔者都会问一下redis分布式锁的知识点,但是令笔者遗憾的是,该知识点十个人中有九个人都答得不清楚,或者回 ...

  9. Ubuntu 16.04 apt 国内源

    一.推荐几个 Ubuntu 16.04 国内的 apt 源 1. 阿里源 # deb cdrom:[Ubuntu 16.04 LTS _Xenial Xerus_ - Release amd64 (2 ...

  10. java基础进阶篇(四)_HashMap------【java源码栈】

    目录 一.前言 二.特点和常见问题 二.接口定义 三.初始化构造函数 四.HashMap内部结构 五.HashMap的存储分析 六.HashMap的读取分析 七.常用方法 八.HashMap 的jav ...