左右滑动开启关闭

  近期实现了向右滑动开启，向左滑动关闭的功能。最初想采用vue插件实现，但功能总也有些不尽如意，因而自己手动用js来实现。

效果如图：

 

代码如下：

vue代码：

 <div class="btn" ref='remove'>
   <span :style="slideBg" class="slide-bg">
      <span ref='btnImg' class="btn-move"  
        @touchstart='touchStart' 
        @touchmove='touchMove' 
        @touchend='touchEnd' 
        :style="slideEffect"
      >
        <img src="./../assets/unlock.png" alt="unlock" v-show="!isShow" class="unlock"/>
        <img src="./../assets/lock.png" alt="unlock" v-show="isShow" class="unlock"/>
      </span>
    </span>
    <div class="slider-tip">
      <span class="slider-text" v-if="showText">右滑开启抢单</span>
      <span class="slider-right-text" v-if="showRightText">左滑关闭抢单</span>
    </div>
  </div>

 js代码：

export default {
  data(){
    return {
      isShow:false,
      startX:0,//开始触摸的位置
      moveX:0,//滑动时的位置
      endX:0,//结束触摸的位置
      disX:0,//移动距离
      slideEffect:'',//滑动时的效果
      slideBg: '',
      btnWidth: 0, // 滑动线条的长度
      btnImg: 0, // 滑动按钮长度
      showText: true,
      showRightText: false,
      isCloseOrder: false // 记录是否关闭订单，第一次进来的时候，不需要调用关闭订单
    }
  },
  mounted() {
    let btnWidth = this.$refs.remove.offsetWidth;
    let btnImg = this.$refs.btnImg.offsetWidth;
    this.btnWidth = btnWidth
    this.btnImg = btnImg
    if (mystorage.getSession('orderStatus')) {
      this.isCloseOrder = true
      this.unlockOrder()
    }
  },
  methods:{
    touchStart:function(ev) {
      ev = ev || event;
      ev.preventDefault();
      // console.log(ev.targetTouches);
      // console.log(ev.changedTouches);
      if(ev.touches.length == 1) {    //tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
        this.startX = ev.touches[0].clientX; // 记录开始位置
        // console.log(this.startX)
      }
    },
    touchMove:function(ev) {
      ev = ev || event;
      ev.preventDefault();
      this.showText = false,
      this.showRightText = false
      let btnWidth = this.btnWidth 
      let btnImg = this.btnImg
      let btnX = this.$refs.remove.offsetLeft // 记录按钮据左侧的位置
      if(ev.touches.length == 1) {
        //滑动时距离浏览器左侧的距离
        this.moveX = ev.touches[0].clientX;
        //实时的滑动的距离-起始位置=实时移动的位置
        this.disX = this.moveX - this.startX;
        // 左侧滑到右侧
        if (this.startX <= btnWidth/2) {
          if(this.disX<0 || this.disX === 0) {
            this.slideEffect = 'transform:translateX(0px)';
            this.slideBg = 'width:0'
          }else if(this.disX > 0){
            this.slideEffect = 'transform:translateX('+this.disX+'px)';
            this.slideBg = `width:${this.disX + btnImg}px`
            // 最大也只能等于滑动按钮宽度 
            if(this.disX + this.startX >= btnWidth) {
              this.slideEffect = 'transform:translateX('+ (btnWidth - btnImg)+'px)';
              this.slideBg = `width:${btnWidth}px`
            }
          }
        } else {
          this.disX = this.moveX - btnX - btnImg / 2;
          // 从右测滑到左侧
          if(this.disX <= 0) {
            this.slideEffect = 'transform:translateX(0px)';
            this.slideBg = 'width:0'
          } else {
            this.slideEffect = 'transform:translateX('+this.disX+'px)';
            this.slideBg = `width:${this.disX + btnImg}px`
            // 最小也只能等于滑动按钮宽度 
            if(this.moveX >= btnWidth) {
              this.slideEffect = 'transform:translateX('+(btnWidth-btnImg)+'px)';
              this.slideBg = `width:${btnWidth}px`
            }
          }
        }
      }
    },
    touchEnd:function(ev){
      ev = ev || event;
      ev.preventDefault();
      let btnWidth = this.btnWidth
      let btnImg = this.btnImg
      if(ev.changedTouches.length == 1) {
        let endX = ev.changedTouches[0].clientX;
        this.disX = endX-this.startX;
        // console.log(this.disX,endX,'this.disX')
        // console.log((btnWidth/2),'btnWidth/2');
         // 左侧滑到右侧
        if (this.startX <= btnWidth/2) {
          if(this.disX < (btnWidth/2)) {
            // 当没有滑动到一半时，滑到左边
            this.slideEffect = 'transform:translateX(0px)';
            this.slideBg = 'width:0'
            this.showText = true,
            this.showRightText = false
            this.isShow = false
          } else {
            // 滑到右边进行的操作
            this.slideEffect = `transform:translateX(${this.btnWidth -                 
              this.btnImg}px);background:#252b3b`;
            this.slideBg = `width:${this.btnWidth}px`
      
            this.isShow = true
            this.showRightText = true
            this.showText = false
          }
        } else {
          if(Math.abs(this.disX) >= (btnWidth/2)) {
            // 同上
          } else {
            // 同上
          }
        }
      }
    }
}