jquery toucheswipe

📌 相关文章

📜 jquery toucheswipe - Javascript (1)

📅 最后修改于: 2023-12-03 15:16:44.310000 🧑 作者: Mango

jquery toucheswipe是一个jquery插件，可以让你的Web应用支持移动设备的swipe手势操作。

安装

你可以直接从github下载源代码，或者使用包管理工具npm进行安装。

npm install jquery-toucheswipe --save

使用

$('#element').swipe({
  swipeLeft:function(event, direction, distance, duration, fingerCount) {
    //向左滑动时的回调函数
  },
  swipeRight:function(event, direction, distance, duration, fingerCount) {
    //向右滑动时的回调函数
  }
});

API

swipe(options)

用于绑定swipe事件。options参数是一个对象，用于配置回调函数。

options

swipe: 必须，swipe事件回调函数。
swipeLeft: 可选，向左滑动回调函数。
swipeRight: 可选，向右滑动回调函数。
swipeUp: 可选，向上滑动回调函数。
swipeDown: 可选，向下滑动回调函数。
swipeStatus: 可选，当执行swipe事件时调用的回调函数。
triggerOnTouchEnd: 可选，是否仅在手指离开触摸屏时才触发swipe事件，默认为false。
allowPageScroll: 可选，允许页面滚动，默认为auto。
fingers: 可选，使用几根手指触发swipe事件，默认为1。
excludedElements: 可选，不触发swipe事件的元素。
threshold: 可选，滑动距离和方向的阈值。
cancelThreshold: 可选，取消swipe事件的阈值。
pinchThreshold: 可选，识别pinch 手势的阈值。
longTapThreshold: 可选，识别长按的阈值。
doubleTapThreshold: 可选，识别双击的阈值。
minSwipeDistance: 可选，最小滑动距离。
maxSwipeTime: 可选，最大滑动时间。

注：以下所有参数都是按 swipeLeft 为例的用法

swipeLeft

event: 事件对象
direction: 方向，值为"left"
distance: 滑动距离
duration: 滑动时间
fingerCount: 手指个数

示例

<html>
<head>
  <title>jquery-toucheswipe-demo</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="jquery.touchSwipe.min.js"></script>
  <style>
    #left, #right {
      position: absolute;
      top: 50%;
      height: 50px;
      width: 50px;
      border: 5px solid #7f7f7f;
      border-radius: 25px;
    }
    #left {
      left: 20px;
    }
    #right {
      right: 20px;
    }
  </style>
</head>
<body>
  <div id="left"></div>
  <div id="right"></div>
  <script>
    $(function() {
      $('#left').swipe({
        swipeLeft: function(event, direction, distance, duration, fingerCount) {
          alert('Swipe left detected!');
        }
      });
      $('#right').swipe({
        swipeRight: function(event, direction, distance, duration, fingerCount) {
          alert('Swipe right detected!');
        }
      });
    });
  </script>
</body>
</html>