0

phonegap アプリの 1 つに iScroll を使用しています。私のテンプレートはこのように設定されています。index.html があります。jQuery load() メソッドを介して動的にページをロードしています。そのため、アプリを起動すると login.html が動的に読み込まれます。その後、iscroll refresh メソッドを使用します。そのため、ページの最後まで最初にスクロールすると機能しますが、2回目にスクロールしたい場合はスクロールしません。そして、このために、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; }
4

1 に答える 1

0

ここで私の答えを確認してください: https://stackoverflow.com/a/18726304/1959362

あなたの場合、次のように「pageshow」イベントで refresh() メソッドを呼び出してみてください。

$('#<id-of-your-jqm-page>').on('pageshow', function() {
    setTimeout(function () {
        myScrollFunction .refresh();
    }, 100);
});
于 2013-09-13T19:50:48.593 に答える