2012-09-19 28 views
0

我正在使用iScroll访问我的phonegap应用程序之一。我的模板是这样设置的。我有index.html。我通过jQuery load()方法动态加载页面。所以会发生的是当我启动应用程序,然后它动态加载login.html。之后我使用iscroll刷新方法。因此,当我滚动第一个页面直到页面结束时它就起作用,但当我想第二次滚动页面时,它不会滚动。并为此,我得到这个错误在我的logcatiscroll不起作用

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; } 
+2

为什么使用2个iscrolls?你有scroll和myScroll – jcesarmobile

+0

@jcesar好点。删除Scroll后,它可以工作:-)。 – 2619

回答

0

这里查看我的回答:https://stackoverflow.com/a/18726304/1959362

在你的情况尝试在'pageshow'事件中调用refresh()方法,如下所示:

$('#<id-of-your-jqm-page>').on('pageshow', function() { 
    setTimeout(function() { 
     myScrollFunction .refresh(); 
    }, 100); 
});