0

レベル ページで iScroll を使用していますが、iScroll を使用していないインデックス ページ (別のページ) でエディターが ReferenceError を訴えます。インデックスで「myScroll」を検索しましたが、インデックスにそのような単語がありません。エラーのため、ブラウザーで動作する iScroll が Android エミュレーターで動作しません。

09-04 08:31:06.249: E/Web Console(942): Uncaught ReferenceError: myScroll is not defined at file:///android_asset/www/index.html:1

エミュレーターをスワイプすると、

09-04 15:58:57.318: W/webview(3045): Stale touch event ACTION_DOWN received from webcore; ignoring

index.html (私は iScroll を使用しませんでした)

<!DOCTYPE html>
<html>
<head>

<title>App Name</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/jquery.mobile-1.0rc1.min.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>        
<div id="mainContainer" data-role="page" >
<div data-role="content">
    <div id="homeLinks">
    <img id="icon" src="css/images/icon.png">
    <p><a href="#level" data-role="button" data-theme="a">level</a></p>

    </div>   
  </div>        
</div>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.0rc1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-1.7.0.js"></script>
</body>
</html>

レベルのページ (iScroll を使用したページ)

<div data-role="page" data-add-back-btn="true" >
<header data-role="header">  
    <a href="settings.html" data-icon="gear" data-theme="b" class="ui-btn-right">Settings</a>  
    <h1>Study Levels</h1>  
</header>
<div id="level1" data-role="content">
    <div id="wrapper">
        <div id="scroller">
             <ul id="thelist">
                  <li><img src="css/images/level1.png"/></li>
                  <li><img src="css/images/level2.png"/></li>
                  <li>zz</li>
            </ul>
        </div>
    </div>

</div>      

<footer data-role="footer" data-position="fixed" data-tap-toggle="false">
    <div id="nav">
      <div id="prev" onclick="myScroll.scrollToPage('prev', 0);return false">&larr; prev</div>
      <ul id="indicator">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
      </ul>
      <div id="next" onclick="myScroll.scrollToPage('next', 0);return false">next &rarr;</div>
    </div>
</footer>   


<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.0rc1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-1.7.0.js"></script>
<script src="js/ender.js"></script>
<script type="text/javascript" src="iscroll-lite.js"></script>
<script type="text/javascript" charset="utf-8">
         $(document).ready(function () {

        this.myScroll = $('#wrapper').iScroll({
        snap: true,
        momentum: false,
       hScrollbar: false,
        onScrollEnd: function () {
          document.querySelector('#indicator > li.active').className = '';
          document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
        }
        })
    })
 </script>
</body>
4

2 に答える 2

1

- - アップデート - - -

別の見方をすると、 $ in $('#wrapper').iScroll... は jQuery ではなく ender からのものであり、それが競合を引き起こしていると思います。

したがって、次のようなクロージャーを作成したい場合があります。

  (function($){
      $(document).ready(function() {
           this.myScroll = $('#wrapper').iScroll({
           //custom options here 
           });
      });
  })(ender);

また、enders の document.ready 関数内の「this」は window オブジェクトを指しているため、

次のようにインライン イベント ハンドラを渡すだけです。

 <div id="prev" onclick="myScroll.scrollToPage('prev', 0);return false"> stuff </div>

それが役に立てば幸い ：）

于 2012-09-04T03:25:56.293 に答える
0

myScroll変数をドキュメントにバインドしました。したがって、を呼び出してそれを使用するか、に置き換える（または単に削除する）ことでにdocument.myScrollバインドして、次のようにすることができます。windowthiswindow

window.myScroll = $('#wrapper') ...

そして、それを通常の変数として呼び出すことができます。

于 2012-09-04T00:49:46.040 に答える