vue实现购物车滑动删除

先来看看效果图

 

写两个盒子，都用定位，内容的盒子right 0  ，删除盒子right 负盒子的宽度

内容盒子注册滑动事件

@touchstart="touchS" @touchmove="touchM" @touchend="touchE"

 

下面贴上滑动方法

// touch事件，显示删除
      touchS (e) {
        if (this.mode !== 'cart') return
        this.clientX1 = e.changedTouches[0].clientX
        this.clientY1 = e.changedTouches[0].clientY
      },
      touchM (e) {
        if (this.mode !== 'cart') return
        this.clientX2 = e.changedTouches[0].clientX
        this.clientY2 = e.changedTouches[0].clientY
        this.disX = this.clientX1 - this.clientX2
        this.disY = this.clientY2 - this.clientY1
        if (Math.abs(this.disY) > Math.abs(this.disX)) {
          return
        }
        this.length = this.disX / this.bodyFontSize
        if (this.disX <= 0) { // 如果移动距离小于等于0，说明向右滑动，文本层位置不变
          this.isRight = true
          this.isLeft = false
          if (this.length >= -(btnWidth) && this.inRight) {
            this.itemRight = (btnWidth - Math.abs(this.length)) + 'rem'
            this.delRight = this.length + 'rem'
          } else {
            this.itemRight = 0
            this.delRight = -(btnWidth) + 'rem'
          }
        }
        if (this.disX > 0 && !this.inRight) {
          this.isRight = false
          this.isLeft = true
          // 控制手指移动距离最大值为删除按钮的宽度
          if (this.length <= btnWidth) {
            this.itemRight = this.length + 'rem'
            this.delRight = -(btnWidth - this.length) + 'rem'
          }
        }
      },
      touchE () {
        if (this.mode !== 'cart') return
        if (this.isRight) {
          // 如果移动距离小于等于0，说明向右滑动，文本层位置不变
          if (this.$refs.item.style.right !== '0') {
            this.itemRight = 0
          }
          if (this.$refs.del.style.right !== -(btnWidth) + 'rem') {
            this.delRight = -(btnWidth) + 'rem'
          }
          this.inRight = false
        }
        if (this.isLeft) {
          // 控制手指移动距离最大值为删除按钮的宽度
          if (this.$refs.item.style.right !== btnWidth + 'rem') {
            this.itemRight = btnWidth + 'rem'
          }
          if (this.$refs.del.style.right !== -(btnWidth) + 'rem') {
            this.delRight = 0
          }
          this.inRight = true
        }
      },

 

1.开始滑动时纪录初始滑动位置

2.滑动中得出滑动距离，如果竖向滑动距离大于横向则return掉

如果是小于0则是向右滑动，判断删除键出来没有，没出来return掉

如果滑动距离小于删除键宽度，则根据滑动距离显示，如下图

如果是向左滑动，同理，删除键显示的情况下return掉，否则根据滑动距离显示

3.滑动结束

如果向右滑动的，结束时删除键还在外面则自动归位

向左时一样，同时将删除键状态值置为正确状态