Question

下面我有两个$('body').swipe();函数，它们显然无法一起运行，因为第二个函数取消了我想要做的事情（两个函数在同一个DOM元素上运行等等）...

第一个功能正常工作。用两根手指左右滑动。我的问题是，这会禁用iPad上正常的一个手指页滚动。

问题：我想要左右滑动＆amp;正确的功能有两个手指（工作），但我想在1个手指滑动时启用allowPageScroll: 'vertical'。我怎么能做到这一点？我无法想办法在swipeLeft:和swipeRight:函数中运行选项（即allowPageScroll：'vertical'，threshold：200，fingers：2）。

可以在此处找到使用的插件：https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

$('body').swipe({
    swipeLeft: function (event, direction, distance, duration, fingerCount) {

        // set cookie
        $.cookie('sb-swipe', 'inactive', { expires: 1 });

        //This only fires when the user swipes left
        openDashboard();

        // hide swipe instructions, if applicable
        $('div.instructions-overlay').fadeOut('slow');
    },
    swipeRight: function (event, direction, distance, duration, fingerCount) {
        //This only fires when the user swipes right
        closeDashboard();

        $('#employee-dash-btn').hide();
    },
        allowPageScroll: 'vertical',
        threshold: 200,
        fingers: 2
});

$('body').swipe({
    allowPageScroll: 'vertical',
    fingers: 1
});

Answer 1

我认为我得到了一些有用的东西，但没有使用你链接的 TouchSwipe 插件（在经过大量测试之后我只是放弃并尝试其他的东西）。

我使用了{em> Touchy （1.98 kb）可以找到here，它可以支持多达5个手指。另一个用于检测向左滑动或右边是一个小手册，通过在触摸事件开始时保存两个手指的X坐标，最后保存为变量。

我们只是比较两个第一坐标是大还是小。下面的代码是向右滑动：

if (finger1Start < finger1End && finger2Start < finger2End)

当两个手指朝同一方向移动时，我决定考虑进行真正的滑动，但是如果你想改变的话，这取决于你。

最后，如果你真的想要threshold，你只需要保存事件的开始和结束时间，new Date().getTime();减去它们并验证它们是>的200毫秒。如果你愿意，我可以更新代码。

这是 Fiddle ，我在iPhone 4s（iOS 7.0.3）上进行了测试。

var finger1Start,
    finger1End,
    finger2Start,
    finger2End,
    threshold = 200;

$('body').touchy({
  two: function (hand, finger1, finger2) {
    
    hand.on('start', function (points) {
      finger1Start = points[0].x;
      finger2Start = points[1].x;
    });
    
    hand.on('end', function (points) {
      finger1End = points[0].x;
      finger2End = points[1].x;
      testSwipe();
    });
  }
});

function testSwipe () {
  if (finger1Start < finger1End && finger2Start < finger2End) 
    // The two X coordinates of the fingers have swipe to the right
    if (finger1End - finger1Start >= threshold &&
        finger2End - finger2Start >= threshold) {
      $('#message').text("You have swipe to the right");
    }
    else {
      $('#message').text("Not enought swipe");
    }
        
  }
  else if (finger1Start > finger1End && finger2Start > finger2End) {
    // The two X coordinates of the fingers have swipe to the left
    if (finger1Start - finger1End >= threshold &&
        finger2Start - finger2End >= threshold) {
      $('#message').text("You have swipe to the left");
    }
    else {
      $('#message').text("Not enought swipe");
    }
  }
}

#message {
  color:green;
}

#text {
  width: 100px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/jairajs89/Touchy.js/master/touchy.js"></script>
<body>
    <div id="message"></div>
    <div id="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut placerat lacus. Etiam vel aliquam quam. Aenean et hendrerit elit, quis porttitor erat. Cras lacinia ornare sem ut laoreet. Sed consectetur felis at hendrerit posuere. Nam porttitor magna sed quam malesuada, eu adipiscing sapien dapibus. Praesent fermentum sem sit amet diam posuere, non vestibulum velit porttitor. Etiam sodales tellus nec mi venenatis dignissim. Aliquam metus lectus, feugiat ac tellus hendrerit, auctor sollicitudin metus.
    
    Morbi bibendum lectus erat, a iaculis tellus egestas nec. Cras adipiscing augue ac lectus placerat tempor. Fusce iaculis mollis lectus, nec mattis mi rhoncus id. Nullam scelerisque feugiat mollis. Mauris nec augue erat. Aliquam fermentum nibh ligula, vel tempus dui feugiat vel. Aliquam a consequat nisl, eu vulputate velit. Mauris pulvinar accumsan leo nec venenatis. Nullam at orci nec lorem facilisis tempor ac vitae purus. Fusce elit nulla, commodo sit amet nisi nec, euismod egestas sem. Nulla dui libero, accumsan et dignissim vitae, commodo vitae leo. Suspendisse potenti. Pellentesque vitae lectus sit amet lacus pulvinar imperdiet in id nulla. Nunc lacinia felis eu lobortis pretium.
    </div>
</body>

多指触摸滑动事件

1 个答案: