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

- - 更新 - - -

再看一眼， $('#wrapper').iScroll... 中的 $ 来自 ender 而不是 jQuery，我相信这会导致冲突。

所以你可能想创建一个闭包，像这样：

  (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，或者你可以window通过替换将它绑定this到window（或者只是删除它）所以它变成：

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

然后您可以将其称为常规变量。

于 2012-09-04T00:49:46.040 回答