4

SwipeTouch プラグインを使用して#child、スワイプして要素を非表示および表示しています。

要素を#parent保持する#child要素があります。

これ#childには常にスクロールバーを作成するのに十分なコンテンツがあるとは限りませんが、ある場合に問題が発生#parentし#childます#child。#parent

<div id="parent">
    <div id="child">
         <!-- Lots of content -->
    </div>
</div>​

任意の方向にスワイプして表示と非表示を許可したい#child...

  • スワイプして要素を表示 することを と呼びます。#childswipeIN
  • スワイプして要素を非表示 にすることを と呼びます。#childswipeOUT

...それに関する問題は、スクロールバーが存在し、#child表示されている場合、スワイプ試行とトリガーとして登録されるため、垂直方向にスクロールできませんswipeOUT。

だから、私は計画を立てました：

  • スクロールバーなし: 全方向にスワイプして と をトリガーswipeINしswipeOUTます。
  • スクロールバー: 全方向にスワイプしてトリガーしswipeINます。上下に「スワイプ」してスクロールし、左右にスワイプしてトリガーしswipeOUTます。

ここに画像の説明を入力

うまくいかないことを除けば、これは良い計画でした。スワイプトップとスワイプダウンを一時的に無効にできればうまくいくと思います...

私の試みへのリンク（問題はタッチデバイスでのみ明らかです）。

タッチ デバイスでのテストに適したリンク

これを機能させる方法についてのアイデアはありますか?

4

2 に答える 2

4

オプション「allowPageScroll」を「auto」（デフォルト）から「vertical」（場合によっては必要に応じて）に設定すると、うまくいくはずです

于 2013-03-15T12:08:54.043 に答える
2

私は自分のプロジェクトの長期計画について考え始め、しばらく前にようやくプラグインの開発者に github 経由で連絡を取ることができました (Link the github issue page )。

彼はプラグインを更新して、すべてのプラグイン オプションをオンザフライで変更できるようにしました。これにより、私が探していた動作も可能になります。これに関するドキュメントは、ここにあります(メソッドは呼び出されます: option)。

http://jsfiddle.net/lollero/yATmM/

http://jsfiddle.net/lollero/yATmM/show

私のコード:

$(function() {      

    $(".parent").each(function() {

        var obj = $(this),
            objD = obj.data(),
            objChild = obj.find('.child'),
            scrollbars = obj.height() < objChild.height();

        obj
        .data({ "swipe": "in" })
        .swipe({

            fallbackToMouseEvents: true,
            swipe:function( event, direction ) {

                // swipeIN = swipe that shows #child 
                // ( Swiping is allowed for all directions ).
                if ( objD.swipe === 'in' ) {

                    obj.data({ "swipe": "out" });
                    objChild.show();

                    // If scrollbar exists, set allowPageScroll data 
                    // to 'vertical', so that next time when you swipe 
                    // up or down, you can scroll vertically.
                    scrollbars && obj.swipe('option', 'allowPageScroll', 'vertical');

                }
                // swipeOUT = swipe that hides#child 
                // If scrollbars don't exist, swipe at any direction to hide.
                // If scrollbars exits, swipe left or right to hide ( Up and Down is reserved for scrolling ).
                else if ( 
                    objD.swipe === 'out' && scrollbars && ( direction === 'left' || direction === 'right' )  || 
                    objD.swipe === 'out' && !scrollbars
                ) {

                    obj.data({ "swipe": "in" });
                    objChild.hide();

                    // If scrollbar exists, set allowPageScroll data to
                    // false, so that next time when you swipe up or down,
                    // you actually trigger a swipe.
                    scrollbars && obj.swipe('option', 'allowPageScroll', false );

                }

            }

        });

    });

});
于 2012-10-24T07:36:14.287 に答える