1.判断滑动的手势条件

  • 触发touchmove事件
  • 移动的超过一定的距离，如10px， 像滑动了1px，2px这类的距离太小，不能视为滑动
  •  1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         *{
10             margin: 0;
11             padding: 0;
12         }
13         .box{
14             width: 200px;
15             height: 200px;
16             background-color: hotpink;
17         }
18     </style>
19 </head>
20 <body>
21     <div class="box">
22 
23     </div>
24 </body>
25 
26 <script>
27 
28     window.onload = function(){
29         var bindSwiperEvent = function(dom, leftCallBack, rightCallback){
30             // 判断手势的条件
31             // 必须滑动 滑动距离超过10px
32             var isMove = false;
33             var startX = 0;
34             var distanceX = 0;
35 
36             dom.addEventListener( 'touchstart', function(e){
37                 startX = e.touchs[0].clientX;
38             })
39 
40             dom.addEventListener('touchmove', function(e){
41                 isMove = true;
42                 var moveX = e.touchs[0].clientX;
43                 distanceX = moveX - startX;
44             })
45 
46             dom.addEventListener('touchend',function(e){
47                 if(isMove && Math.abs(distanceX >= 10)){
48                     // 右滑动
49                     if(distanceX>0){
50                         rightCallback && rightCallback.call(this,e);
51                     }
52                     // 左滑动
53                     else{
54                         leftCallBack && leftCallBack.call(this,e);
55                     }
56                 }
57                 // 重置参数
58                 isMove = false;
59                 startX = 0;
60                 distanceX = 0;
61             })
62         }
63 
64         bindSwiperEvent( document.querySelector('.box'), function(e){
65             console.log('左滑动')
66         }, function(e){
67             console.log('右滑动')
68         }  )
69     }
70 </script>
71 
72 </html>
    三个超实用的移动端触摸滑动js插件
  •  

     

    第一个超实用的移动端触摸滑动js插件：Swiper中文网

    开源、免费、强大的移动端触摸滑动插件—swiper.min.js

  • 学习移动端的滑动手势事件_移动端

     

     

    Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。

    Swiper中文网提供Swiper在线演示、Swiper中文教程、Swiper中文APi、Swiper下载。

    同时Swiper也是目前公认的最好的移动触摸滑动插件。

     

    官网地址：http://www.swiper.com.cn/

    移动端的DEMO演示地址：http://www.swiper.com.cn/demo/senior/index.html

  • 第二个超实用的移动端触摸滑动js插件：TouchSlide

    TouchSlide 是纯javascript打造的触屏滑动特效插件，面向手机、平板电脑等移动终端，
    能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

    也是大话主席 superslide旗下的一款移动端触摸滑动插件。superslide也是PC端优秀的js特性插件。

  • 学习移动端的滑动手势事件_触屏_02

     

     DEMO演示地址：http://www.superslide2.com/TouchSlide/demo.html

  • 第三个超实用的移动端触摸滑动js插件：iSlider

    iSlider是一个表现出众，无任何插件依赖的手机平台javascript滑动组件。它能够处理任何元素，例如图片或者DOM元素。是百度团队开发完成的。

  • 学习移动端的滑动手势事件_ide_03

     

     

    使用和DEMO演示地址：http://be-fe.github.io/iSlider/demo/index_chinese.html

    同时-iSlider也是目前最 轻量、高性能的移动滑动方案。 值得大家去研究和使用。