文章基于《vue登錄時人機驗證-滑塊驗證》實現(xiàn)觸屏滑動

觸屏滑動方法如下：

//觸摸移動
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)'
       //執(zhí)行成功的函數(shù)
       this.errorFun && this.errorFun()
     } else {
       this.rangeStatus = true
       if (this.status) {
         this.$parent[this.status] = true
       }
       //執(zhí)行成功的函數(shù)
       this.successFun && this.successFun()
     }
     document.ontouchmove = null
     document.ontouchend = null
   }
 }