zepto 滑动事件-CSDN博客

　　这几天再做一个移动端微官网，用到的是zepto框架，踩了几个小坑，以此记录一下，强化一下记忆。

　　首先，官网提供的文件只包含部分模块。如果你发现自己的触发事件不能触发或者animate()方法等不能实现的话，那说明你没有引入实现该功能的模块，自己去官网下载下并引入就可以了。

　　然后要说的是zepto的滑动事件，经测试，其提供的事件在uc和微信里不能被触发。

　　解决方法：

 1 /**
 2 * 第一个参数为要滑动的元素
 3 * 第二个参数为方向  * 第三个参数为滑动后要执行的函数
 4 */
 5 function swipe(dom,dir,fun) {
 6     var startX,
 7         startY,
 8         endX,
 9         endY,
10         door;
11     dom.addEventListener('touchstart', touchStart, false);
12     dom.addEventListener('touchmove', touchMove, false);  
13     dom.addEventListener('touchend', function(event){
14         if(door){
15         //判断滑动方向
16             switch(dir){
17                 case 'left':if (endX- startX < 0) {
18                     fun();
19                 }             break;
20                 case 'right':if(endX-startX > 0){
21                     fun();
22                 }
23                 break;
24                 case 'top':if(endY-startY < 0){
25                     fun();
26                 }
27                 break;
28                 case 'bottom':if(endY-startY > 0){
29                     fun();
30                 }
31                 break;
32             }
33         }
34         door = false;
35     }, false); 
36     function touchStart(event){
37         var touch = event.touches[0]; //获取第一个触点  
38         startX = Number(touch.pageX); //页面触点X坐标  
39         startY = Number(touch.pageY); //页面触点Y坐标 
40     }     
41     function touchMove(event){
42         touch = event.touches[0];
43         endX = Number(touch.pageX);
44         endY = Number(touch.pageY);
45         door = true;
46     } 
47 }
48 //举例
49 swipe(document,"right",function(){
50  console.log("向右滑动");
51 });