3

iScroll4 を使用して、モバイル Web サイト内の画像に水平スクロール効果を作成しています。iScroll はうまく機能しますが、問題は、iScroll ラッパーに含まれる画像がネイティブの垂直スクロールを無効にすることです。つまり、ページをナビゲートするためのユーザーの指のスワイプは、iScroll でラップされたイメージ内のどこでも無効になります。

SwipeView はこの問題を解決できるかもしれませんが、ドキュメント (少なくとも私にとっては) はそれほど明確ではありません。iScroll でラップされた画像で SwipeView を効果的に使用する方法を知っている人はいますか?

4

2 に答える 2

3

すでに作成された回答をほぼ再現して申し訳ありませんが、コードを別のスペースに貼り付ける必要があります。

Alastair の例は、私にはうまくいきませんでした。私がダウンロードした iScroll のバージョンは、クラスのマッチングをサポートしていないようで、オブジェクトが必要でした。私のプロジェクトにはすでにjQueryがあるので、それを使ってアクティブな要素を渡しました。

scroller = new iScroll($('.swipeview-active')[0], {
  hScroll: false,
  lockDirection: true,
  hideScrollbar: true,
  fadeScrollbar: true
});

http://cubiq.org/swipeviewcarousel.onFlip()のダウンロードで、demo/inline/test.html の例の関数の最後にこれを追加しました

拡張テストは行っていません。これは、使用するライブラリの組み合わせを比較しながら少し調べているだけですが、上記のコードを使用して Chrome で期待どおりに動作しています。

編集iPhoneのモバイルサファリでテストしたところ、こちらのリンクもhttps://dl.dropbox.com/u/81328343/scroll/test.html

唯一のこと (それが良いか悪いかはユースケースによって異なります) は、スライドに戻るときに最初に戻ることです。

于 2012-08-31T14:06:56.540 に答える
2

ドキュメントもひどく欠けていることがわかりましたが、次のようなものがうまくいきます：

function swipeView(wrapper){
        wrapper = new SwipeView('#wrapper', {
        numberOfPages: pages.length
    });

    wrapper.onFlip(function(){
        scroller = new iScroll('.swipeview-active', {
            hScroll: false,
            lockDirection: true
        });
    });
}

これにより、現在の SwipeView ページにスワイプすると、iScroll が初期化されます。水平方向の iScroll スクロールが無効になり、そのイベントを SwipeView で使用できるようになり、方向がロックされるため、垂直 (iScroll) スワイプの進行中にユーザーのスワイプ方向を変更しても、次の SwipeView ページにスワイプしません。これらのオプションがないと、奇妙な水平スワイプを行うことができます.

于 2012-07-06T14:16:01.433 に答える