使用iScroll和jQuery Mobile绑定问题

Question

我目前正在尝试将iscroll 4与jQuery Mobile配合使用，但却让我非常苦恼。

如果我禁用JQM ajax默认导航，则一切正常，但我希望保留它。

我的问题是我无法成功地调用/绑定iscroll，以便它可以与需要它们的页面一起工作。 我已经尝试了pageinit（）和pagecreate（），但都没有成功。

这里可以找到一个基本示例： http://bit.ly/ngXkNR 非常感谢任何指针。

A.

- Adi

---

代码会很有帮助。您在第二页刷新iScroll了吗？ - dotchuZ

jQuery Mobile文档建议您使用它们的pageinit事件，但我无法将其与您的代码配合使用。*http://jquerymobile.com/demos/1.0rc1/docs/api/events.html - Deebster

Answer 1

谢谢Jasper，我稍微修改了您的方法，这样您就可以在任何使用类标识的包装器上调用iScroll。此外，我会在页面隐藏事件上卸载和销毁所有iScroll实例 - 我不需要刷新方法来满足我的需求：

// iScroll variable
var myScroll = [];

$(document).delegate('[data-role="page"]', 'pageshow', function () {

    var $page = $(this);

    // setup iScroll
    $($page.find('.iscroll_wrapper')).each(function(index) {

        var scroller_id = $(this).get(0);

        myScroll.push(
            new iScroll(scroller_id, {
                snap       : true,
                momentum   : false,
                hScrollbar : false
            }));
    });

});

$(document).delegate('[data-role="page"]', 'pagehide', function () {

    // unset and delete iScroll
    for (x in myScroll)
    {
        myScroll[x].destroy();
        myScroll[x] = null;
        myScroll.splice(x, 1);
    }

});

- naabster

Answer 2

请参考我四天前为您创建的示例（使用iscroll与jquery mobile）... 您当前绑定的事件只在页面初始加载时触发，而您需要绑定到一个jQuery Mobile事件，该事件会在每次向DOM添加新页面时触发。请进行更改。

var myScroll;
document.addEventListener('DOMContentLoaded', loaded, false);

致：

var myScroll = [];
$(document).delegate('[data-role="page"]', 'pagecreate', function () {
        myScroll[this.id] = new iScroll(this.id + '_wrapper', {
        snap: true,
        momentum: false,
        hScrollbar: false
     });
});

需要在每个页面上将wrapper div重命名为_wrapper。这是必要的，因为DOM中每个ID元素都需要唯一的ID。链接：使用jquery mobile的iscroll --更新--

我创建了一个示例，演示如何在多个页面上使用iScroll轮播。请注意，在每个页面上包含自定义JavaScript和CSS，以便如果用户刷新页面（任何页面），他们不会因缺少代码而收到任何错误信息。

以下是可工作示例的链接：http://apexeleven.com/stackoverflow/iScroll/default.html

- Jasper

---

嗨Jasper，非常感谢你的帮助。我已经按照你上面提到的更改了（我认为我做得没错），但似乎并没有像预期的那样工作，可以在这里看到http://bit.ly/ngXkNR。 - Adi

我查看了您的链接，我的初始印象是您可能需要研究一下jQuery Mobile如何通过AJAX导航管理DOM。由于多个页面可以同时存在于DOM中，因此每个页面都需要其ID是唯一的（两个页面不能有一个具有'id'为'scroller'的div），但是您可以将这些标识符更改为类，因为类不必是唯一的。当我有更多时间时，我会尝试给出您代码的更具体指针。 - Jasper

谢谢Jasper。如果有人能为我提供一个与jquery mobile（默认ajax导航）兼容的可工作的iscroll4，我愿意支付$$$。该网站几乎每个页面都有一个旋转木马，并且客户真的希望保留ajax /页面过渡效果。 - Adi

请查看我在答案更新中发布的示例：http://apexeleven.com/stackoverflow/iScroll/default.html - Jasper

嗨，Jasper。非常感谢这个。我遇到的问题是我无法为每个滚动/页面设置预定义/唯一的ID。是否有办法仅通过查找类来实现类似的操作？ - Adi

我相信您必须使用ID来初始化iScroll，但是您可以在使用$.each()循环初始化时为元素分配ID。 var num = 0; $.each($('.iscroll-class'), function (index, value) { value.id = 'iscroll_id_' + num++; })。这将循环遍历所有具有iscroll-class类的元素并为它们分配ID，如果您想要的话，可以在同一循环中初始化iScroll。在jQuery Mobile中，通常为每个伪页面分配唯一的ID，为什么不只使用该唯一ID，然后在末尾附加“home_iscroll”作为您想要滚动的ID？ - Jasper