touchSlide

js
move, question, source

左右滑动(touch slide)

轮播图，手指拖动滑屏问题

示例1：这是拖动指根据方向判断后，进行切换。

  • 这是展示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/*
* @param  start  这是按下的值
* @param  moveX  这是拖拽的值
* @param  currentPageIndex1  这是需要改变的Tab页
* @param  diffX
*/

var allcopm = document.getElementsByClassName("allcomp")[0];
allcopm.addEventListener("touchstart", touchStartTab, false);
allcopm.addEventListener("touchmove", touchMoveTab, false);
allcopm.addEventListener("touchend", touchEndTab, false);

function touchStartTab(e){
    e = e || event;
    var touch = e.touches[0];
    startX = touch.pageX;
    moveX = touch.pageX;
    diffX = 0;
}
function touchMoveTab(e){
    e.preventDefault();
    e = e || event;
    moveX = e.touches[0].pageX;
    diffX = moveX - startX;

}
function touchEndTab(e){
    if( -100 > diffX){
        right()//向右执行函数；
    }
    if( diffX > 100 ){
        left()//向左执行函数；       
    }
}

示例2：这是可以跟着拖动走的效果

  • 真实使用
  1. 添加三个事件处理函数，采用了原生。
  2. 往右滑动的时候，会触发浏览器默认事件(返回上一步)。在move事件的时候要给默认阻止事件。event.preventDefault()。
  3. 由于css给设定里transition所以拖动move距离差值后改变位置，会出现延迟以及不流畅问题。 要先把css里的transition给赋值null;touchEnd的时候在添加上transition效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

vue中使用：

//mounted中执行调用
var allcopm = document.getElementsByClassName("allcomp")[0];
allcopm.addEventListener("touchstart", this.touchStartTab, false);
allcopm.addEventListener("touchmove", this.touchMoveTab, false);
allcopm.addEventListener("touchend", this.touchEndTab, false);

/*
* @param  this.start  这是按下的值
* @param  this.moveX  这是拖拽的值
* @param  this.currentPageIndex1  这是第几个的Tab页
* @param  this.diffX
* @param  每个tab页面宽是1920px
*/

touchStartTab:function(e){
    e = e || event;
    var touch = e.touches[0];
    this.startX = touch.pageX;
    this.moveX = touch.pageX;
    this.diffX = 0;
    this.inner = document.querySelector(".innerCompont");
    this.inner.style.transition = "null";//去抽
},
touchMoveTab:function(e){
    e = e || event;
    e.preventDefault();
    this.moveX = e.touches[0].clientX;
    this.diffX = this.moveX - this.startX;
    if (-20 > this.diffX || this.diffX > 20) {
    
        this.disX = this.startX - this.moveX;
        var aa = -this.currentPageIndex1 * 1920 - Math.floor(this.disX);
        
        //下面两个if是判断首页和尾页之间也有200像素的左右拖拽。
        
        if (-7880 > aa) {//这是最后一个页面（第五个 4*1920+200）
          aa = -this.currentPageIndex1 * 1920 - 200;
        }
        if (aa > 200) {//这是第一个页面（第五个 4*1920+200）
          aa = 200;
        }
        //用translate改变位置
        this.inner.style.transform = "translateX(" + aa + "px)";
   }

},
touchEndTab:function(e){
    if( -100 > this.diffX){
        if(this.currentPageIndex1<4){
                this.currentPageIndex1++ //向右加一
                this.clearTimer();//这里是清除定间隔时器的tab切换
                this.makeTimer();//重新启动间隔时器的tab切换
        }else{
                this.currentPageIndex1=4
               
        }
    }
    if( this.diffX > 100 ){
        if(this.currentPageIndex1<1){
            this.currentPageIndex1 = 0
        }else{
            
            this.currentPageIndex1--  //向左减一
            this.clearTimer();
            this.makeTimer();
        }           
    }
    this.inner.style.transition = "all .5s ease-in-out";
    this.inner.style.transform = "translateX(-" + 1920 * this.currentPageIndex1 + "px)";
}

最终会遇到一个问题：

  • 如果采用多个手指会触发多个touchstart和touchEnd事件，导致最后抬起的时候执行多次函数事件，会切换多个页面，添加一个锁

  • 解决:
    声明两个个变量(例如：numberStart、numberEnd )，在touchStart的时候给numberStart++,在 touchEnd的时候给numberEnd++;然后判断两个是否相等，相等表示多个手指离开的时候给执行一次。

示例3：解决多个手指，拖动后会滑动多个模块。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

vue中使用：

//mounted中执行调用
var allcopm = document.getElementsByClassName("allcomp")[0];
allcopm.addEventListener("touchstart", this.touchStartTab, false);
allcopm.addEventListener("touchmove", this.touchMoveTab, false);
allcopm.addEventListener("touchend", this.touchEndTab, false);

/*
* @param  this.start  这是按下的值
* @param  this.moveX  这是拖拽的值
* @param  this.currentPageIndex1  这是第几个的Tab页
* @param  this.diffX
* @param  每个tab页面宽是1920px
* @param  this.numberStart
* @param  this.numberEnd   
*/

touchStartTab:function(e){
    e = e || event;
    var touch = e.touches[0];
    this.startX = touch.pageX;
    this.moveX = touch.pageX;
    this.diffX = 0;
    this.inner = document.querySelector(".innerCompont");
    this.inner.style.transition = "null";//去抽
    this.numberStart++;
},
touchMoveTab:function(e){
    e = e || event;
    e.preventDefault();
    this.moveX = e.touches[0].clientX;
    this.diffX = this.moveX - this.startX;
    if (-20 > this.diffX || this.diffX > 20) {
    
        this.disX = this.startX - this.moveX;
        var aa = -this.currentPageIndex1 * 1920 - Math.floor(this.disX);
        
        //下面两个if是判断首页和尾页之间也有200像素的左右拖拽。
        
        if (-7880 > aa) {//这是最后一个页面（第五个 4*1920+200）
          aa = -this.currentPageIndex1 * 1920 - 200;
        }
        if (aa > 200) {//这是第一个页面（第五个 4*1920+200）
          aa = 200;
        }
        //用translate改变位置
        this.inner.style.transform = "translateX(" + aa + "px)";
   }

},
touchEndTab:function(e){
    this.numberEnd++;
    //做个判断，判断手指是否全部离开屏幕
    if(this.numberStart != this.numberEnd){
        return ;
    }
    if( -100 > this.diffX){
        if(this.currentPageIndex1<4){
                this.currentPageIndex1++ //向右加一
                this.clearTimer();//这里是清除定间隔时器的tab切换
                this.makeTimer();//重新启动间隔时器的tab切换
        }else{
                this.currentPageIndex1=4
               
        }
    }
    if( this.diffX > 100 ){
        if(this.currentPageIndex1<1){
            this.currentPageIndex1 = 0
        }else{
            
            this.currentPageIndex1--  //向左减一
            this.clearTimer();
            this.makeTimer();
        }           
    }
    this.inner.style.transition = "all .5s ease-in-out";
    this.inner.style.transform = "translateX(-" + 1920 * this.currentPageIndex1 + "px)";
}
分享到