[英]iscroll does not working
I am using iScroll to one of my phonegap app. 我正在使用iScroll到我的phonegap应用程序之一。 The way my template is setup like this. 我的模板的设置方式如下。 I have index.html. 我有index.html。 and I am loading pages dynamically via jQuery load() method. 我通过jQuery load()方法动态加载页面。 So what happens is when I launch the app then it loads login.html dynamically. 所以发生的事情是当我启动应用程序然后动态加载login.html时。 and after that I use iscroll refresh method. 然后,我使用iscroll刷新方法。 So it works when I scroll for the first ime until the end of the page but then it it does not scroll when I want to scroll for the second time. 因此,当我滚动第一个ime到页面末尾时它可以工作,但是当我想第二次滚动时它就不会滚动。 And for this I get this error in my logcat 为此,我在logcat中收到此错误
Miss a drag as we are waiting for WebCore's response for touch down
How can I make it work? 我该如何运作?
Here is my index.html 这是我的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>
Here is my js file 这是我的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);
});
here is my css 这是我的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; }
Check my answer here: https://stackoverflow.com/a/18726304/1959362 在这里检查我的答案: https : //stackoverflow.com/a/18726304/1959362
In your case try to call the refresh() method on 'pageshow' event like so: 在您的情况下,请尝试在“ pageshow”事件上调用refresh()方法,如下所示:
$('#<id-of-your-jqm-page>').on('pageshow', function() {
setTimeout(function () {
myScrollFunction .refresh();
}, 100);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.