【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)
完美解决
【bug】table重新加载数据,页面滚动条下沉到底部,记录scrollTop后将其恢复scrollTop出现闪烁的更多相关文章
- [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件
页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
- easyui datagrid 异步加载数据时滚动条有时会自动滚到最底部的问题
在使用easyui 的datagrid异步加载数据时发现滚动条有时会自动滚到最底部.经测试发现,如果加载数据前没有选中行则不会出现这个问题.这样我们可以在重新异步加载数据前取消选中行就可以避免这个问题 ...
- table+ajax加载数据
//ajax加载notice $(function() { //${pageContext.request.contextPath}/ /** var res = [ {noticeTitle:'必答 ...
- 使用 jQuery Ajax 在页面滚动时从服务器加载数据
简介 文本将演示怎么在滚动滚动条时从服务器端下载数据.用AJAX技术从服务器端加载数据有助于改善任何web应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用 ...
- 淘宝购物车页面 智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
- jQuery 滚动条 滚动到底部(下拉到底部) 加载数据(触发事件、处理逻辑)、分页加载数据
1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...
- 【重大bug】viewpager使用的时候加载数据应该在setOnPageChangeListener里加载
[重大bug]viewpager使用的时候加载数据应该在setOnPageChangeListener里的onPageSelected里加载,我说怎么首页有数据,第二页就是空白,就是加载了但是数据不显 ...
- Ajax页面的加载数据与删除
1.数据库找一张表: 颜色表2.主页面主页面的代码用到tbody:TBODY作用是:可以控制表格分行下载,从而提高下载速度.(网页的打开是先表格的的内容全部下载完毕后,才显示出来,分行下载可以先显示部 ...
随机推荐
- 使用powerdesigner进行数据库设计
powerdesigner安装破解文件:链接:https://pan.baidu.com/s/1oKAdUqTKElQ9d86FV-SDTQ 密码:l4y5 基本操作参考:1.PowerDesigne ...
- windows dnsrecon
缺了两个模块 第一个:https://pypi.python.org/pypi/netaddr 第二个:dnspython 找到下载后setup.py install就OK了,话说GFW真***了,用 ...
- ZeroMQ,史上最快的消息队列
一.ZMQ 是什么 阅读了 ZMQ 的 Guide 文档后,我的理解是,这是个类似于 Socket 的一系列接口,他跟 Socket 的区别是:普通的 socket 是端到端的(1:1的关系),而 Z ...
- AI:拿来主义——预训练网络(一)
我们已经训练过几个神经网络了,识别手写数字,房价预测或者是区分猫和狗,那随之而来就有一个问题,这些训练出的网络怎么用,每个问题我都需要重新去训练网络吗?因为程序员都不太喜欢做重复的事情,因此答案肯定是 ...
- 一步一步理解AdaBoosting(Adaptive Boosting)算法
最近学习<西瓜书>的集成学习之Boosting算法,看了一个很好的例子(https://zhuanlan.zhihu.com/p/27126737),为了方便以后理解,现在更详细描述一下步 ...
- linux安装国产数据库(金仓数据库,达梦数据库,南大通用数据库)
今天在公司做的任务是,在Linux的环境下安装三种数据库,结果一种数据库也没有安装好,首先遇到的问题是安装南大通用数据库遇到安装的第五步,就出现问题了,问题是Gbase SDK没有安装成功,以及Gba ...
- 字符串匹配算法 之BF、KMP
示例: 1. 已知字符串str1="acabaabaabcacaabc",求str2="abaabcac"是否在字符串str1中? 2. DNA病毒检测.已知患 ...
- C# 关于位运算的学习笔记
一.理解什么是位运算 程序中的所有内容在计算机内存中都是以二进制的形式储存的(即:0或1),简单来说位运算就是直接对在内存中的二进制数的每位进行运算操作. 二.学习前先了解一下有哪些运算,运算符都怎么 ...
- Vuex的理解以及它的辅助函数
理解:vue中的“单向数据流”,这里借用官网的图示: Vue是单向数据流,v-model只是语法糖而已.单向数据流就是:数据总是[向下传递]从父级组件传递给子组件,只能单向绑定.子组件内部不能直接修改 ...
- 日常破解--从XCTF的app3题目简单了解安卓备份文件以及sqliteCipher加密数据库
一.题目来源 题目来源:XCTF app3题目 二.解题过程 1.下载好题目,下载完后发现是.ab后缀名的文件,如下图所示: 2.什么是.ab文件?.ab后缀名的文件是Andr ...