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. 当学术邂逅浪漫 – 记MobiCom 2015大会

    作者:微软亚洲研究院主管研究员 刘云新 今年的MobiCom大会在著名的浪漫之都巴黎举行.通常于欧洲举办的会议的参会人数会相对少一些,但今年的MobiCom大会吸引了近400人参加,绝不少于往年.浪漫 ...

  2. Serverless 每周小报-20190610

    微软和 Red Hat 开源 KEDA:Fission 发布 1.3.0 博客精选 10 THINGS TO KNOW ABOUT SERVERLESS COMPUTING - BEFORE YOU ...

  3. array, matrix, list and dataframe

    总结一下"入门3R"(Reading, 'Riting, 'Rrithmetic)中的读和写,不同的数据结构下的读写还是有点区别的. vector 命名 12 month.days ...

  4. Git 程序员篇

    关于 Git Git 背后的故事 伟大的作品总是诞生于伟大的时代,正如 Git 同样诞生于一个英雄辈出.极富纷争的年代. 2005 年,Linux 内核开发社区正面临严峻的挑战:他们不能继续使用 Bi ...

  5. ADO.NET中DataTable类的使用

    DataTable类将关系数据表示为表格形式.在创建DataTable之前,必须包含System.Data名称空间.ADO.NET提供了一个DataTable类来独立创建和使用数据表.它也可以和Dat ...

  6. JVM性能优化

    java应用程序是应用在JVM上的,你们对JVM又有多少了解呢?JVM将内存分为三部分:NEW(年轻代).Tenured(年老代).Perm(永久代). (1)年轻代:用来存放java分配的新对象. ...

  7. Sentinel Slot扩展实践-流控熔断预警实现

    前言 前几天公司生产环境一个服务由于流量上升触发了 Sentinel 的流控机制,然后用户反馈访问慢,定位发现是 task 定时任务导致,后面 task 优化之后发布,流量恢复正常. 这是一个再正常不 ...

  8. 前端每日实战:113# 视频演示如何用纯 CSS 创作一个赛车 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mGdXGJ 可交互视频 此视频是可 ...

  9. 解决layui表单ajax提交回调函数不起作用问题的两种方式

    最近想用layui开发一个论坛模板用的是fly-ui,才接触layui对其还不太熟悉.一个简单的登录就困扰了我很久.登录的form通过ajax提交回调函数老是不起作用.经过浪费了N多时间的调试,发现l ...

  10. Java集合03——你不得不了解的Map

    Map 在面试中永远是一个绕不开的点,本文将详细讲解Map的相关内容.关注公众号「Java面典」了解更多 Java 知识点. Map Map 是一个键值对(key-value)映射接口: 映射中不能包 ...