jQuery.touchswipe插件

TouchSwipe一款专门为移动设备设计的jquery插件，用于监听单个和多个手指触摸等事件。

一、特点：

1、监听滑动的4个方向：上、下、左、右；

2、监听多个手指收缩还是外张；

3、支持单手指或双手指触摸事件；

4、支持单击事件touchSwipe对象和它的子对象；

5、可定义临界值和最大时间来判断手势的实际滑动；

6、滑动事件有4个触发点：“开始”,“移动”,“结束”和“取消”；

7、结束事件可以在触摸释放或是达到临界值时触发；

8、允许手指刷和页面滚屏；

9、可禁止用户通过输入元素（如：按钮、表单、文本框等）触发事件；

二、安装

1、NPM

npm install jquery-touchswipe --save

2、Bower

bower install jquery-touchswipe --save

3、将压缩文件添加到你的项目里

4、使用

$(function() {
  $("#test").swipe( {
    //Generic swipe handler for all directions
    swipe:function(event, direction, distance, duration, fingerCount, fingerData)                     {
      $(this).text("You swiped " + direction ); 
    }
  });
 
  //Set some options later
  $("#test").swipe( {fingers:2} );
});   

三、Methods(方法)

1、swipe：初始化

例子：$("#element").swipe（{

//给id为element的容器触摸滑动监听事件

}）;

2、destroy：彻底销毁swipe插件，必须重新初始化插件才能再次使用任何方法

例子：$("#element").swipe("destroy");

3、disable：禁止插件，使插件失去作用

返回值：现在与插件绑定的DOM元素

例子：$("#element").swipe("disable");

4、enable：重新启用插件，恢复原有的配置

返回值：现在与插件绑定的DOM元素

例子：$("#element").swipe("enable");

5、option：设置或获取属性

例子：

$("#element").swipe("option", "threshold"); // 返回阈值

$("#element").swipe("option", "threshold", 100); // 设置阈值

$("#element").swipe("option", {threshold:100, fingers:3} ); // 设置多个属性

$("#element").swipe({threshold:100, fingers:3} ); // 设置多个属性 -"option"方法可省略

$("#element").swipe("option"); // 返回现有的options

四、Events事件

1、swipe：滑动事件

swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
            $(this).text("You swiped " + direction ); 
            }

参数：

2、swipeDown：向下滑动事件

swipeDown: function(event, direction, distance, duration, fingerCount, fingerData) {

}

参数同swipe事件

3、swipeUp：向上滑动事件

swipeUp: function(event, direction, distance, duration, fingerCount, fingerData) {

}

参数同swipe事件

4、swipeLeft：向左滑动事件

swipeLeft: function(event, direction, distance, duration, fingerCount, fingerData) {

}

参数同swipe事件

5、swipeRight：向右滑动事件

swipeLeft: function(event, direction, distance, duration, fingerCount, fingerData) {

}

参数同swipe事件

6、swipeStatus：滑动过程会持续触发swipeStatus事件，不受阈值限制

swipeLeft: function(event, direction, distance, duration, fingerCount, fingerData, currentDirection) {

}

参数：

7、tap：当用户简单地点击或者轻击而不是滑动一个元素时tap/click事件将被触发

tap:function(event,target){

console.log($(target).attr("class"));

}

参数：

event:原生事件对象

target:被点击的元素（DOM对象）

8、doubleTap：当用户连续两次点击或者轻击而不是滑动一个元素时事件将被触发

doubleTap:function(event,target){

console.log($(target).attr("class"));

}

参数：

event:原生事件对象

target:被点击的元素（DOM对象）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
<title>demo</title>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.touchSwipe.min.js"></script>
<style>
* {margin: 0; padding: 0;}
body,html {width: 100%; height: 100%; background: pink;}
.div1 {height: 200px; background: red;}
.div2 {height: 200px; background: blue;}
</style>
</head>
<body>
<p>改 demo 待完善...</p>
<p>建议在手机端测试</p>
<p class="disable">禁用</p>
<p class="enable">恢复</p>
<p class="destroy">销毁</p>
<p class="init">初始化</p>
<div class="div1">
滑动这里
</div>
<div class="div2">
</div>
<script>
$(function() {
//兼容ie8+、手机端
$('.div1').swipe({
/*swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
$('body').append('direction -> '+ direction);
$('body').append('distance -> '+ distance);
$('body').append('duration -> '+ duration);
$('body').append('fingerCount -> '+ fingerCount);
},*/
/*//向左滑
swipeLeft: function(event, direction, distance, duration, fingerCount, fingerData) {
$('body').append('direction -> '+ direction +'<br>');
$('body').append('distance -> '+ distance +'<br>');
$('body').append('duration -> '+ duration +'<br>');
$('body').append('fingerCount -> '+ fingerCount +'<br>');
},*/
/*//滑动过程中
swipeStatus:function(event, phase, direction, distance, duration, fingerCount, fingerData, currentDirection) {
var html = 'phase -> '+ phase +'<br>'+ 'direction -> '+ direction +'<br>'+'distance -> '+ distance +'<br>'+'duration -> '+ duration +'<br>'+'fingerCount -> '+ fingerCount +'<br>'+'currentDirection -> '+ currentDirection +'<br>';
$('.div2').html(html);
},
triggerOnTouchEnd: false,//启动超过阈值停止插件
<p> threshold: 200,//滑动阈值 distance > threshold 时 phase = end</p><p><span style="white-space:pre"> excludedElements: "button, input, select, textarea, .noSwipe",</span>//让a标签也支持滑动事件</p>allowPageScroll: 'auto',//滑动时不影响滚动条的正常滚动，该项只在swipeStatus生效 maxTimeThreshold: 5000,//触摸阈值 duration > maxTimeThreshold 时 phase = cancle
triggerOnTouchLeave: true,//手指离开对象，停止插件
fingers: 'all',//手指数量(手机端生效)*/
tap: function(event, target) {
$('.div2').append('<br>tap:'+ $(target).attr('class'));
},
doubleTap: function(event, target) {
$('.div2').append('<br>doubleTap:'+ $(target).attr('class'));
},
hold: function(event, target) {
$('.div2').append('<br>hold:'+ $(target).attr('class'));
}
}).on('click', function(e) {//同时绑定click
$('.div2').append('<br>click:'+ $(this).attr('class'));
}).on('dblclick', function(e) {//同时绑定click
$('.div2').append('<br>dblclick:'+ $(this).attr('class'));
});
//
$('.disable').on('click', function() {
$('.div1').swipe('disable');
});
$('.enable').on('click', function() {
$('.div1').swipe('enable');
});
$('.destroy').on('click', function() {
$('.div1').swipe('destroy');
});
$('.init').on('click', function() {
$('.div1').swipe({
swipe: function() {
console.log(1);
},
});
});
});
</script>
</body>
</html>

来源：CSDN

作者：无所求则无所获

链接：https://blog.csdn.net/y525794266/article/details/80918796

标签

swipe

option

threshold

手机滑动touchSwipe

jQuery.touchswipe插件