4

我正在使用SwipeTouch 插件通过滑动来隐藏和显示#child元素。

我有#parent包含元素的#child元素。

#child并不总是有足够的内容来创建滚动条,但是当有时就会出现问题。#parent约束#child元素,如果#child元素高于#parent

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

我想允许向任何方向滑动以显示和隐藏#child...

  • 滑动显示 #child元素将被称为swipeIN
  • 滑动隐藏 #child元素将被称为swipeOUT

...问题是,如果并且当滚动条存在并且#child可见时,我无法垂直滚动,因为这将注册为滑动尝试并触发swipeOUT

于是,我有了一个计划:

  • 无滚动条:向各个方向滑动即可触发swipeINswipeOUT
  • 滚动条:滑动所有方向以触发swipeIN。向上或向下“滑动”以滚动,向左或向右滑动以触发swipeOUT

在此处输入图像描述

这是一个很好的计划,只是它不起作用。我想如果我能够禁用向上滑动并暂时向下滑动,它会起作用......

链接到我的尝试(问题仅在触摸设备上很明显)。

更适合在触控设备中进行测试的链接

关于如何让它发挥作用的任何想法?

4

2 回答 2

4

将选项“allowPageScroll”从“auto”(默认)设置为“vertical”(在某些情况下,如果需要)应该可以解决问题

于 2013-03-15T12:08:54.043 回答
2

我开始考虑自己项目的长期计划,前段时间终于让自己通过github联系了插件的开发人员(链接 github 问题页面)。

他更新了插件,以便您现在可以即时更改所有插件选项。这也使我正在寻找的行为成为可能。可以在此处找到相关文档(该方法称为:)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 回答