text 向左滑动即可进行操作

Posted 2021-05-02

<template>
    <div class="left-delete" 
         :style="txtStyle">
        <div class="move"
             @touchstart="_touchStart"
             @touchmove="_touchMove"
             @touchend="_touchEnd">
            <slot></slot>
        </div>
        <div ref="remove" 
             class="deleteIcon" 
             :style="zIndex"  
             @click.prevent="deleteItem(index)">
        {{ text }}
        </div>
    </div>
</template>

<script>
export default {
  name: 'SwipeLeft',
  props: {
    index: Number,
    text: String
  },
  data() {
    return {
      startX: 0, //触摸位置
      moveX: 0, //滑动时的位置
      disX: 0, //移动距离
      startY: 0,
      txtStyle: 'transform:translateX(0)',
      zIndex: 'z-index:-1'
    }
  },
  methods: {
    // 是否是左右滑动
    slideHorizon (dx, dy) {
      let angle = Math.atan2(dy, dx) * 180 / Math.PI
      // 角度大于 +/- 30 | 150 度 就认为不是左右滑动
      return !((angle >= -150 && angle < -30) || (angle >= 30 && angle < 150))
    },
    _touchStart (ev) {
      ev = ev || event
      if (ev.touches.length === 1) {
        // 手指按下的时候记录按下的位置
        this.startX = ev.touches[0].clientX
        this.startY = ev.touches[0].clientY
      }
    },
    _touchMove (ev) {
      ev = ev || event
      //获取删除按钮的宽度，此宽度为滑块左滑的最大距离
      let wd = this.$refs.remove.offsetWidth
      let height = this.$refs.remove.offsetHeight
      if (ev.touches.length === 1) {
        // 滑动过程中的实时位置
        this.moveX = ev.touches[0].clientX
        // 滑动过程中实时计算滑动距离
        this.disX = this.startX - this.moveX
        this.txtStyle = 'transform:translateX(-' + this.disX + 'px)'
        if (this.disX >= wd) {
          this.txtStyle = 'transform:translateX(-' + wd + 'px)'
          this.zIndex = 'z-index:' + 10 + 'rem'
        }
      }
    },
    _touchEnd (ev) {
      ev = ev || event
      let wd = this.$refs.remove.offsetWidth
      if (ev.changedTouches.length === 1) {
        this.zIndex = 'z-index:' + -1 + 'rem'
        // 手指移动结束后的水平位置
        let endX = ev.changedTouches[0].clientX
        let endY = ev.changedTouches[0].clientY

        // 触摸开始与结束,手指移动的距离
        this.disX = this.startX - endX
        let disY = this.startY - endY
        if (this.slideHorizon(this.disX, disY)) {
          // 左滑
          if (this.disX >= 0) {
            if (Math.abs(this.disX) < wd / 2) {
              this.txtStyle = 'transform:translateX(0px)'
            } else {
              //大于一半 滑动到最大值
              this.txtStyle = 'transform:translateX(-' + wd + 'px)'
            }
          } else {
            this.txtStyle = 'transform:translateX(0px)'
          }
        } else {
          this.txtStyle = 'transform:translateX(0px)'
        }
      }
    },
    deleteItem (index) {
      this.$emit('deleteItem', index)
    }
  }
}
</script>

<style>
    .left-delete {
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 2;
      transition: all 0.2s;
      -webkit-transition: all 0.2s;
    }
    .move {
      position: relative;
    }
    .deleteIcon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 100%;
      position: absolute;
      right: -2rem;
      top: 0;
      background: red;
      color: white;
    }
</style>