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。

于是，我有了一个计划：

  • 无滚动条：向各个方向滑动即可触发swipeIN和swipeOUT。
  • 滚动条：滑动所有方向以触发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 回答