文章基于《vue登录时人机验证-滑块验证》实现触屏滑动
触屏滑动方法如下：
//触摸移动
touchMove(e) {
let ele = e.target
let one = e.targetTouches[0]
let startX = one.clientX
let eleWidth = ele.offsetWidth
let parentWidth = ele.parentElement.offsetWidth
let MaxX = parentWidth - eleWidth
if (this.rangeStatus) {
//不运行
return false
}
document.ontouchmove = e => {
let endX = e.targetTouches[0].clientX
this.disX = endX - startX
if (this.disX <= 0) {
this.disX = 0
}
if (this.disX >= MaxX - eleWidth) {
//减去滑块的宽度,体验效果更好
this.disX = MaxX
}
ele.style.transition = '.1s all'
ele.style.transform = 'translateX(' + this.disX + 'px)'
}
document.ontouchend = () => {
if (this.disX !== MaxX) {
ele.style.transition = '.5s all'
ele.style.transform = 'translateX(0)'
//执行成功的函数
this.errorFun && this.errorFun()
} else {
this.rangeStatus = true
if (this.status) {
this.$parent[this.status] = true
}
//执行成功的函数
this.successFun && this.successFun()
}
document.ontouchmove = null
document.ontouchend = null
}
}
