vue中左右滑动切换内容
触摸参数:touchstart:触摸开始touchmove:接触点改变,滑动时touchend:触摸结束,手指离开屏幕时touches:当前位于屏幕上所有手指的列表代码部分:html:<div class="all" @touchstart = "touchstart" @touchmove = 'touchmove'></div>js:touchstart(e){this
·
触摸参数:
touchstart:触摸开始
touchmove:接触点改变,滑动时
touchend:触摸结束,手指离开屏幕时
touches:当前位于屏幕上所有手指的列表
代码部分:
html:
<div class="all" @touchstart = "touchstart" @touchmove = 'touchmove'></div>
js:
touchstart(e){
this.startX = e.touches[0].clientX
this.startY = e.touches[0].clientY
},
touchmove(e){
this.moveX = e.touches[0].clientX
this.moveY = e.touches[0].clientY
let x = this.moveX - this.startX
let y = this.moveY - this.startY
if(x > 20 && Math.abs(x) > Math.abs(y) ){
this.active = 0 //右滑
}
if(x < - 20 && Math.abs(x) > Math.abs(y) ){
this.active = 1 //左滑
}
},
更多推荐
已为社区贡献1条内容
所有评论(0)