3

私は現在、iscroll4をjQueryMobileで動作させるために髪を引っ張っています。

JQM ajaxのデフォルトのナビゲーションを無効にすると、すべて正常に機能しますが、これを保持したいと思います。

私の問題は、iscrollを正常に呼び出し/バインドする方法がわからないため、iscrollが必要なページで機能することです。pageinit（）とpagecreate（）を試しましたが無駄になりました。

この基本的な例はここにあります：http： //bit.ly/ngXkNR

どんなポインタでも大歓迎です。

A。

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

4 日前に作成した例に従ってください ( jquery mobile で iscroll を使用)...最初のページの読み込み時にのみ発生するイベントにバインドしていて、新しいページが読み込まれるたびに発生する 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 を必要とするため、とにかく必要です。

リンク: jquery モバイルで iscroll を使用する

- アップデート -

複数のページで iScroll カルーセルを使用する例を作成しました。カスタム JavaScript と CSS を各ページにどのように組み込んでいるかに注意してください。これにより、ユーザーが (任意のページで) ページを更新しても、コードが見つからないためにエラーが発生しなくなります。

実際の例へのリンクは次のとおりです。http://apexeleven.com/stackoverflow/iScroll/default.html

于 2011-10-11T16:16:10.463 に答える