背景
在Web应用程序中，有的列表需要异步加载，这时候通常就会支持上拉加载更多和下拉刷新事件。在某个项目中，我们用到的是jQuery WeUI中的组件。奇怪的是，在Android环境下运行正常，但是在iOS环境下却出现上拉事件无效。
寻找原因
在该项目中，使用的是父页面中包括了子页面，并且使子页面响应上拉事件：
Parent.html
<style>
#wrapper {
height: 100%;
}
iframe {
width: 100%;
height: 100%;
margin: 100%;
padding: 100%;
border: 100%;
}
</style>
<div id="wrapper">
<iframe src="" name="list"></iframe>
</div>
在jQuery WeUI中上拉加载更多使用的是下面的js代码：
IFrame.js
var loading = false;
$(document.body).infinite().on("infinite", function() {
if (loading) return;
loading = true;
setTimeout(function() {
// load data and add to list...
loading = false;
}, 1500);
});
但是用Safari实时调试的时候并没有响应这个方法。
解决
- 比较简便的方法是给`
<iframe>外的<div>加上以下样式：
Parent.css
#wrapper {
-webkit-overflow-scrolling: touch;
overflow: auto;
}
- 而在当时考虑的是，当前的代码是在子页面响应上拉事件，所以考虑直接在父页面上面响应上拉事件。这个方法也解决了问题。
IFrame.js
var loading = false;
function LoadMoreCallByParent() {
if (loading) return;
loading = true;
setTimeout(function() {
// load data and add to list...
loading = false;
}, 1500);
}
Parent.js
window.addEventListener("scroll", function (e) {
var body = document.body;
if (body.scrollTop + body.clientHeight == body.scrollHeight) {
// iframe is scroll to the bottom so call the refresh method
list.window.loadMoreCallByParent();
}
});