js 移动端 touch 实现拖拽

香菊网 发表于: 2019-09-30 分类: js部分  H5部分  前端front  

引言:

  在我们使用vue-cli的时候有的时候需要右滑或者左滑触发时间的功能,引用插件显得累赘,要不就是懒得自己搬轮子,这里有一个简单实现拖拽的方法 也可用于刷新

原理:

  我们都知道pc端的触发是mouse 手机端的是touch , 我们正好利用移动端的 @touchstart @touchmove @touchEnd 记录当前手指从开始触摸到最后离开的位置 然后定义元素的translateX的距离

注意:当前只去了touch的数组的第一个元素 也就是单指。

 

实现:

           <tr 
              v-for="(ite, ind) in tabList" 
              :key="ind" 
              @click="goDetail(ite)" 
              @touchstart="Tstart($event)" 
              @touchmove="Tmove($event)"
              @touchend="Tend($event, ite.id)">
              ...

            </tr>
data () {
  return {
      startLocal: 0, // 手指开始位置
      moverLocal: 0, // 手指移动位置 (包括移动的最后位置)
      ...
  }
}
methods: {
    // 手指触摸
    Tstart (e) {
      this.startLocal = e.targetTouches[0].pageX
    },
    // 手指移动
    Tmove (e) {
      this.moverLocal = e.targetTouches[0].pageX
      let cunt = this.moverLocal - this.startLocal
      // 右滑
      if (cunt > 0) {
        // 可触发的距离
        if (cunt > 80) {
          e.target.parentNode.setAttribute('class', 'active')
          // 最大移动距离
          e.target.parentNode.style.transform = `translateX(${(cunt > 140 ? 140 : cunt) / 4}px) scale(1.3)`
        } else {
          // 移除
          e.target.parentNode.setAttribute('class', '')
          e.target.parentNode.style.transform = `translateX(${(cunt > 140 ? 140 : cunt) / 4}px)`
        }
      } else {
        // 左滑保持不变
        e.target.parentNode.style.transform = 'translateX(0)'
      }
    },
    // 手指离开
    Tend (e, id) {
      // 松开复原
      e.target.parentNode.setAttribute('class', '')
      e.target.parentNode.style.transform = 'translateX(0)'
      if (this.moverLocal - this.startLocal > 80) {
        console.log('手指松开 方法触发')
      }
    },



}

标签: js部分H5部分前端front
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮