7

I have two $('body').swipe(); functions below, which obviously can't function together because the second one cancels out what I want to do (two functions run on the same DOM element, etc.)...

The first function works as it should. Swipes left and right with TWO fingers. My problem is, this disables the normal one finger page scroll one would be able to do on the iPad.

Question: I want to run the swipe left & right functions with two fingers (works), however I want to enable allowPageScroll: 'vertical' on 1 finger swipe. How can I accomplish this? I can't figure out a way to run the options (i.e. allowPageScroll: 'vertical', threshold: 200, fingers: 2) within the swipeLeft: and swipeRight: functions only.

The plug-in used can be found here: 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
});
4

1 回答 1

5

我想我得到了一些工作，但不是你链接的TouchSwipe插件（经过大量测试我只是放弃并尝试另一件事）。

我使用了 Touchy (1.98 kb)，可以在这里找到，它支持最多 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>

于 2013-11-17T21:30:43.757 回答