3

我目前正在努力让 iscroll 4 与 jQuery Mobile 一起工作。

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

我的问题是我无法弄清楚如何成功调用/绑定 iscroll，因此它适用于需要它们的页面。我尝试了 pageinit() 和 pagecreate() 无济于事。

一个基本的例子可以在这里找到：http: //bit.ly/ngXkNR

任何指针都非常感谢。

一个。

4

2 回答 2

7

感谢 Jasper，我稍微更改了您的方法，以便您可以在任何标识为类的包装器上调用 iScroll。此外，我在 pagehide 事件中卸载并销毁所有 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);
    }

});
于 2011-11-25T10:16:07.260 回答
6

按照我四天前为您创建的示例（使用 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。无论如何，这是必要的，因为每个具有 ID 的元素都需要 DOM 中的唯一 ID。

链接：使用 iscroll 和 jquery mobile

- 更新 -

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

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

于 2011-10-11T16:16:10.463 回答