iPhone 应用程序 - JQTouch 和 iScroll 不起作用 - 有什么想法吗？

Question

谁能帮帮我，我的头撞墙了 2 天！试图让 iScroll 与我的 phonegap/jqtouch 应用程序一起工作。已经尝试了我在互联网上可以找到的所有建议，但我得到的只是没有滚动或橡皮筋，所以我无法查看页面底部。 简而言之，我的代码是：

HTML 标头：

<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" src="jqtouch/jquery.js"></script>
<script type="text/javascript" src="jqtouch/jqtouch.js"></script>
<script type="text/javascript" src="iscroll-lite.js"></script>
<script type="text/javascript" src="myAppCode.js"></script>
<script type="text/javascript">

    var myScroll;

    function onBodyLoad()
    {
        document.addEventListener("deviceready",onDeviceReady,false);
    }

    function onDeviceReady()
    {
        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
        document.addEventListener('DOMContentLoaded', loaded, false);
    }

    function loaded()
    {
        myScroll = new iScroll('wrapper');
        myScroll.refresh();
    }

</script>

HTML（我添加了 'wrapper' 和 'scroller' div）：

<!-- Options Page header bar-->
 <div id="options_page">
  <div class="toolbar">
   <h1>Past Paper</h1>
   <a class="button flip" href="#reset_page">Reset Stats</a>
  </div>

<!-- why won't you scroll??? -->
 <div id="wrapper">
  <div id="scroller">

   <!-- Stats section div - dynamically generated stats by refreshStats() --> 
   <div id="Stats"></div>

    <h2>General</h2>
    <ul class="rounded">
    <li>Only new questions?<span class="toggle"><input type="checkbox" id="notSeen" /></span></li></ul>

    <h2>Categories</h2>
    <ul class="rounded">
     <li>Cardiology<span class="toggle"><input type="checkbox" id="cardiology" /></span></li>
     <li>Respiratory<span class="toggle"><input type="checkbox" id="respiratory" /></span></li>
     <li>Gastrointestinal<span class="toggle"><input type="checkbox" id="gastrointestinal" /></span></li>
     <li>Neurology<span class="toggle"><input type="checkbox" id="neurology" /></span></li>
    </ul>

    <div id="optionStartQuiz">
     <ul><li class="whiteButton">Start!</li></ul>
    </div>
   </div>
  </div>
</div>

myAppCode.js 包含 refreshStats() 函数，用于在上面的 Stats div 中显示信息：

$(document).ready(function()
{       
    // load variables from local storage              
    loadLocalStorage();

    // load the stats div
    refreshStats();

    // refresh scores everytime the main page is loaded
    $('#main_page1').bind('pageAnimationStart', function(){
        refreshStats();
        }); 
});

function refreshStats()
{
        // an HTML ul
    var tempStats = '<h2>Current Stats</h2><ul class="rounded"><li>Questions completed<span style="float: right">' + OVERALL_questionsFirstTime + '/' + OVERALL_numberOfQuestions + '</span></li><li>Percentage correct<span style="float: right">' + percentageScore + '%</span></li></ul>';

        // display me
    $('#Stats').html(tempStats);
}

所以基本上我希望能够滚动包装器和滚动器 div 中的内容，但无法理解它！谢谢，尼克

Answer 1

我遇到了同样的问题。应该滚动的 div 会出现橡皮筋，直到我改变了 iPhone 上的方向。我尝试了 iscroll 文档页面中的超时方法，但没有任何效果。

使用 v4.0 beta4 我添加了

checkDOMChange: true

在创建我的滚动包装器时。这就像一个魅力。不太确定问题出在哪里，但我在 jQTouch 页面中使用它。

有一点需要注意，checkDOMChange: 被列为实验性...

第

Answer 2

好吧，终于搞定了。为了让 jQTOuch 和 iScroll 相互配合，每次 JQTouch 使页面上的滚动区域消失时，都需要重新设置它们。换句话说，一旦你隐藏了 div，iScroll 就不知道下次让它可见时要滚动什么。因此，您会得到臭名昭著的橡皮筋效应。要解决这个问题，只需添加一个事件侦听器，在调用 div 后立即重置滚动区域。确保给它 100 到 300 毫秒的延迟。下面的代码假定您的变量名为myScroll：

$(".about").tap(function(){
    setTimeout(function(){myScroll.refresh()},300);
});

顺便说一句，这里是如何使用 iScroll 建立多个滚动条：

var scroll1, scroll2;
function loaded() {
    scroll1 = new iScroll('wrapper1');
    scroll2 = new iScroll('wrapper2');
}

希望这对某人有所帮助。

Answer 3

我遇到了同样的问题。我的元素过去只是反弹和安顿下来。 我编辑了 scroll.js 以使 checkDOMChanges:true 开始工作正常。

Answer 4

这是我的解决方案。

$("a").tap(function(){ setTimeout(function(){myScroll.refresh()},300); });

上面的代码假设你的 iScroll 变量是 myScroll， 当您点击链接时，代码会强制您的 iScroll 刷新。

Answer 5

我不确定 iScroll4，但最初的 iScroll 依赖于 CSS 类来正确滚动 - 具体来说，需要定位包装器并设置溢出 - 在 iScroll4 的演示中，我看到它们仍在设置类似的属性在包装器和滚动条上：

http://www.cubiq.org/dropbox/iscroll4/examples/simple/

我不确定您是否已经这样做了（只是没有包含 CSS） - 但您的代码看起来不错。

Answer 6

我在使用 iScroll（iScroll4 之前，尚未测试 4）使其与 DIV 而非 UL 列表一起工作时遇到了极大的麻烦。但是...今天我在google groups (see reply by manmade at 9:59)发现了一个帖子，建议添加一行：

that.refresh();

在第 81 行附近的 iScroll 代码中。在最新的 iScroll (v3.7.1) 中，此行被添加到第 85 行，在“START_EVENT”的情况下，就在该行之后：

that.touchStart(e);

我还没有准确分析它为什么起作用，但它可以让我的 div 完美滚动。