问题描述

问题出现的环境背景及自己尝试过哪些方法

左滑显示删除，点击进行操作，但是点击删除的时候一直是编辑的方法，搞蒙了

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<ul>
        <li class="clearfix" v-for="(item, index) in addressList" :key="index">
          <div @touchstart='touchStart($event, index)' @touchmove='touchMove($event, index)' @touchend='touchEnd($event, index)' :style="item.deleteSlider">
              <div class="address-info fl">
                <p>{{item.address}}</p>
                <p>{{item.name}}<span>{{item.mobile}}</span></p>
              </div>
              <div class="edit fl" @click="edit(index)">
                <div v-if="item.default" class="default-address"></div>
                <p>{{ $t('button.modify') }}</p>
              </div>
              <div class="delete fl" @click="del(index)" :key="index" ref="remove">
                <p>{{ $t('button.delete') }}</p>
              </div>
          </div>
        </li>
      </ul>

addressList: [{
        id: 1,
        name: 'Nola',
        address: '嘻嘻嘻嘻嘻嘻嘻嘻寻寻寻寻寻寻寻寻寻寻',
        mobile: '18559301258',
        default: 1
      }, {
        id: 2,
        name: 'Caroline',
        address: '是考虑到顺丰快递酸辣粉觉得靠撒了房间打扫啊',
        mobile: '18559301258'
      }],
      delWidth: '56.25',
      startX: 0, // 触摸位置
      endX: 0, // 结束位置
      moveX: 0, // 滑动时的位置
      disX: 0, // 移动距离
      deleteSlider: '' // 滑动时的效果,使用v-bind:style="deleteSlider"

edit (id) {
      console.log('编辑')
      let params = {

      }
      this.$router.push({path: '/addAddress', props: params, component: resolve => require(['@/Address/Add.vue'], resolve)})
    },
    del (id) { // 删除地址
      console.log('删除')
      this.addressList.splice(id, 1)
      console.log(this.addressList)
    },
    touchStart (ev) {
      ev = ev || event
      if (ev.touches.length === 1) { // tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
        this.startX = ev.touches[0].clientX // 记录开始位置
      }
    },
    touchMove (ev, id) {
      ev = ev || event
      let that = this
      if (ev.touches.length === 1) {
        that.moveX = ev.touches[0].clientX // 滑动时距离浏览器左侧实时距离
        that.disX = that.startX - that.moveX // 起始位置减去 实时的滑动的距离，得到手指实时偏移距离

        let list = deepCopy(that.addressList)
        if (that.disX < 0 || that.disX === 0) { // 如果是向右滑动或者不滑动，不改变滑块的位置
          list[id].deleteSlider = 'transform:translateX(0px)'
        } else if (that.disX > 0) { // 大于0，表示左滑了，此时滑块开始滑动
          list[id].deleteSlider = 'transform:translateX(-' + that.disX * 5 + 'px)'
          if (that.disX * 5 >= that.delWidth) { // 最大也只能等于删除按钮宽度
            list[id].deleteSlider = 'transform:translateX(-' + this.delWidth + 'px)'
          }
        }
        // that.addressList = deepCopy(list)
      }
    },
    touchEnd (ev, id) {
      let that = this
      ev = ev || event
      if (ev.changedTouches.length === 1) {
        let endX = ev.changedTouches[0].clientX
        that.disX = that.startX - endX

        let list = deepCopy(that.addressList)
        if ((that.disX * 5) < (that.delWidth / 2)) { // 如果距离小于删除按钮一半,强行回到起点
          list[id].deleteSlider = 'transform:translateX(0px)'
        } else {
          list[id].deleteSlider = 'transform:translateX(-' + that.delWidth + 'px)' // 大于一半，滑动到最大值
        }
        that.addressList = deepCopy(list)
      }
    }

你期待的结果是什么？实际看到的错误信息又是什么？

我想要点击删除信息，但是点击删除的时候却变成了编辑跳转页面，难道滑动删除的时候实际的点击事件还是在编辑这块