最近在做页面保存状态时,由详情页跳转回列表页,恢复状态时,有很明显的等待时间。当初以为是恢复数据时,由于又去请求的数据造成的,结果是一个由“加载更多”的功能带来的坑。
“加载更多”的实现效果为:当页面滑动时,元素视口高度+元素滚动高度+70(只是为了多一部分空间)>=元素滚动高度时,就加载下一页的数据。
在PC端一切表现的那么完美,后面测试手机自带浏览器也很快,就唯独在微信内置浏览器中打开有很明显的等待时间。
在微信开发者工具中,检测到这样一个问题,就是只要一滑动,数据就去请求下一页。如果数据分了20页,那我滑动20下,等跳转回列表页时,我需要去循环请求20页的数据,然后再恢复页面位置。这样,势必恢复状态很慢。
最后查到了是由于scrollingElement获取错误的原因,看以下代码:
window.addEventListener('scroll', function(event) {
var eleScrolling;
if (eleScrolling = event.target.scrollingElement) {
if (scope.toggleSpy) {
if (scope.onbottom && angular.isFunction(scope.onbottom)) {
if (eleScrolling.clientHeight + eleScrolling.scrollTop + parseInt(scope.offset) >= eleScrolling.scrollHeight) {
scope.$apply(function() {
scope.toggleSpy = false;
scope.onbottom();
});
}
}
}
}
});
scrollingElement:在标准模式下, 这是文档的根元素, document.documentElement;在怪异模式下,是获取的body或者null。
所以,在微信内置浏览器中,调试发现,获取的真的是body。
在我的代码中,body的client就是它的scrollHeight,因此只要一滚动,高度总是大于的,就总会去请求下一页,直到请求完数据。
记录一下这个坑,防止以后踩踏。