我正在使用 iScroll 到我的 phonegap 应用程序之一。我的模板是这样设置的。我有 index.html。我正在通过 jQuery load() 方法动态加载页面。因此,当我启动应用程序时会发生什么情况,然后它会动态加载 login.html。之后我使用 iscroll refresh 方法。因此,当我第一次滚动到页面末尾时它可以工作,但是当我想第二次滚动时它不会滚动。为此,我在 logcat 中收到此错误
Miss a drag as we are waiting for WebCore's response for touch down
我怎样才能让它工作?
这是我的 index.html
<header>
Header
</header>
<div id="wrapper">
<div id="scroll-content">
</div>
</div>
<footer>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Photos</a></li>
</ul>
</footer>
</body>
<script type="text/javascript">
var theScroll;
function scroll() {
theScroll = new iScroll('wrapper', { vScrollbar: true });
}
document.addEventListener('DOMContentLoaded', scroll, false);
</script>
这是我的js文件
jQuery(function () {
var myScroll = new iScroll('wrapper');
var Login = {
onDeviceReady : function () {
$('#scroll-content').load('./pages/login.html', function () {
setTimeout(function () {
myScroll.refresh();
}, 0);
});
$(document).on('touchstart', '#btnlogin', Login.validate);
},
validate : function (e) {
e.preventDefault();
var input;
$('#loginform input').each(function () {
input = $(this).val();
if(input == "") {
$(".errormsg").html('Enter all mandatory fields');
$(this).addClass('error');
}
});
}
};
document.addEventListener("deviceready", Login.onDeviceReady, false);
});
这是我的CSS
footer {
background-color: #c27b00;
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
height: 48px;
padding: 0;
border-top: 1px solid #444; }
footer ul {
margin: 0;
padding: 0; }
footer ul li {
display: inline-block;
padding: 5% 10.5%;
background-color: #fafafa; }
footer ul li a {
width: 100%;
height: 100%; }
body #wrapper {
position: absolute;
z-index: 1;
top: 45px;
bottom: 48px;
left: 0;
width: 100%;
background: #aaa;
overflow: auto; }
body #wrapper #scroll-content {
position: absolute;
z-index: 1;
width: 100%;
padding: 0; }