清哥的小屋

1
<div
2
  class="item"
3
  @touchstart="gtouchstart(item, item.id, $event)"
4
  @touchmove="gtouchmove($event, item, item.id)"
5
  @touchend="gtouchend(item, item.id)"
6
>
7
<p
8
  class="cancel"
9
  v-show="item.show == 'true' && radio == item.id"
10
  @click="deleteHouse(item.isDefault)"
11
>删除</p>

1
gtouchstart (item, id, e) {
2
  this.phone = checkDevice();
3
  if (this.phone == "Android") {
4
    // 长按3秒 开始触摸
5
    this.timeOutEvent = 0
6
    this.timeOutEvent = setTimeout(() => {
7
      this.radio = id
8
      this.$set(item, 'show', 'true')
9
    }, 500)
10
  } else {
11
    this.moveDistance = 0 // 阻力滑动距离归0
12
    this.move = 0 // 移动距离归0
13
    this.startX = e.targetTouches[0].clientX // x轴归0
14
  }
15
},
16
gtouchmove (e, item, id) {
17
  this.phone = checkDevice();
18
  if (this.phone == "Android") {
19
    clearTimeout(this.timeOutEvent)
20
    this.timeOutEvent = 0
21
  } else {
22
    // 获取左滑的距离
23
    this.move = this.startX - e.targetTouches[0].clientX
24
    console.log(this.move)
25
    // move大于0，说明手指移动了
26
    if (this.move > 0) {
27
      // 阻止默认事件，因为有些app会有默认事件
28
      e.preventDefault()
29
      // 增加滑动阻力，尤为重要，如果不要这一步，上下滑动就会不经意触发左右滑动事件
30
      this.moveDistance = Math.pow(this.move, 0.8)
31
      // 设置滑动的最大距离，如果阻力滑动的距离大于按钮的宽度，就赋值为按钮的宽度
32
      if (this.moveDistance > this.distance) {
33
        // 如果滑动距离大于15 出现隐藏按钮
34
        this.radio = id
35
        this.$set(item, 'show', 'true')
36
      } else {
37
        // 滑动距离并没有超过按钮的一半，给我归位
38
        this.radio = ''
39
        this.$set(item, 'show', 'false')
40
      }
41
    }
42
  }
43
},
44
gtouchend (item, id) {
45
  this.phone = checkDevice();
46
  if (this.phone == "Android") {
47
    clearTimeout(this.timeOutEvent)
48
    this.timeOutEvent = 0
49
  } else {
50
    if (this.move == 0 && item.show == 'true') {
51
      // 触发点击事件
52
      this.$emit('deleteHouse')
53
    } else if (this.move > 0 && item.show == 'false') {
54
      // 如果滑动结束  滑动距离大于右侧按钮的一半  则出现按钮，否则隐藏按钮
55
      if (this.moveDistance > this.distance / 2) {
56
        this.radio = id
57
        this.$set(item, 'show', 'true')
58
      } else {
59
        // 滑动距离并没有超过按钮的一半，给我归位
60
        this.radio = ''
61
        this.$set(item, 'show', 'false')
62
      }
63
    } else {
64
      this.radio = ''
65
      this.$set(item, 'show', 'false')
66
    }
67
  }
68
},