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. Eclipse如何打开Android工程

    一.Eclipse如何打开Android工程 1.你可以在file->new->other->android object选择选项:create object from exists ...

  2. (转载)SVN使用说明

    为了方便个人使用,转载过来的,如需查阅,请前往原文地址:http://blog.csdn.net/ideal_utopia/article/details/51883796 为什么要使用SVN? 在程 ...

  3. 【快速上手】Git的使用教程

    创建Git仓库 git init 查看当前仓库情况 git status 添加修改 git add (file) or git add . 查看未提交的修改 git diff 撤销提交操作 git r ...

  4. C++走向远洋——68(十六周、文件)

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

  5. C++走向远洋——(项目二、存储班长信息的学生类、派生)

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

  6. Sublime Text3 旧版本下载以及破解激活方式

    前言 当前Sublime Text3 出到了32**版本,以前直接输入激活码的方法已经不能使用. 而官网又不提供旧版本的下载链接,因此在此分享旧版本下载方式以及激活方式. 下载方法 通过下面这个链接下 ...

  7. property 属性

    #propery 属性"""内置装饰器函数,只在面向对象中使用."""#计算圆的面积,圆的周长 from math import pi cl ...

  8. 什么是Activiti

    什么是Activiti Activiti属于工作流引擎的一个开源实现.Activiti由Tom Bayen发起.在2010年5月发布了第一个版本.命名也很有意思的采取了Activities(活动)的化 ...

  9. 组件化思路:以selection为例子,使用prop-types实现组件化控制,重用

    需求 书接上文,UI 积累之select section 这里又来两个需求了. 当我点击选择了option后,我应该看到的是我选择的option的内容 多例重用,即同样是个selection,我只是需 ...

  10. JAVA基础之IO流知识总结

    一.IO流体系图 IO常用的几个流: [I/O流原理作用] Input/Output:输入输出机制 输入机制:允许java程序获取外部设备的数据(磁盘,光盘,网络等). 输出机制:保留java程序中的 ...