使用iscroll和jquery移动绑定问题

Question

我正在努力让我的头发试图让iscroll 4与jQuery Mobile合作.

如果我禁用JQM ajax默认导航这一切都工作正常,但我想保留这个.

我的问题是我无法解决如何成功调用/绑定iscroll所以它适用于需要它们的页面.我试过pageinit()和pagecreate()无济于事.

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

任何指针都非常赞赏.

一个.

Answer 1

谢谢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);
    }

});

Answer 2

按照我四天前为您创建的示例(使用iscroll with 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

--UPDATE--

我创建了一个在多个页面上使用iScroll轮播的示例.请注意我如何在每个页面上包含自定义JavaScript和CSS,因此如果用户刷新页面(在任何页面上),由于缺少代码,它们不会收到任何错误.

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