touch-events.uvue 3.5 KB
Newer Older
1 2
<template>
  <scroll-view style="flex: 1">
W
wanganxp 已提交
3
    <page-head title="拖拽图标测试相关事件(在小程序上本示例会卡顿,小程序上应使用movable-view)"></page-head>
4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
    <view class="container">
      <view class="view-box" @touchstart="onViewTouchStart">
        <image class="icon" id="icon" src="../image/logo.png" @touchstart="onTouchStart" @touchcancel="onTouchCancel"
          @touchmove="onTouchMove" @touchend="onTouchEnd"></image>
      </view>

    </view>
    <view v-if="touchEvent !== null">
      <text class="title1">touches: </text>
      <template v-for="(touch, index) in touchEvent!.touches" :key="index">
        <text class="title2">touch[{{ index }}]:</text>
        <text>identifier: {{touch.identifier}}</text>
        <text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
        <text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
        <text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
      </template>
    </view>
  </scroll-view>
</template>

<script>
  export default {
    data() {
      return {
        move: false,
        posX: 0,
        posY: 0,
        lastX: 0,
        lastY: 0,
        touchEvent: null as TouchEvent | null,
34 35 36
        icon: null as UniElement | null,
        touchTargets: "",
        touchTargetsCount: 0,
37 38 39 40
        iconRect : null as DOMRect | null
      }
    },
    onReady() {
41
      this.icon = uni.getElementById("icon")
42 43
      // #ifdef APP-IOS
      this.iconRect = this.icon?.getBoundingClientRect()
44
      // 加上导航栏及状态栏高度
45
      this.iconRect.y += uni.getSystemInfoSync().safeArea.top + 44
46 47
      // #endif
    },
48 49
    methods: {
      onViewTouchStart(e : TouchEvent) {
50
        this.touchTargets += e.target!.tagName + e.currentTarget!.tagName
51
        this.touchTargetsCount++
52
        // console.log(this.touchTargets, this.touchTargetsCount)
53
      },
54 55
      onTouchStart(e : TouchEvent) {
        this.touchTargetsCount++
56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126
        this.touchTargets += e.target!.tagName + e.currentTarget!.tagName

        this.touchEvent = e
        if (!this.move) {
          this.move = true
          this.posX = e.touches[0].screenX
          this.posY = e.touches[0].screenY
        }
      },
      onTouchMove(e : TouchEvent) {
        e.preventDefault()
        this.touchEvent = e
        let p = e.touches[0]
        if (p.screenX == this.lastX && p.screenY == this.lastY) {
          return
        }
        let x = p.screenX - this.posX
        let y = p.screenY - this.posY
        this.lastX = p.screenX
        this.lastY = p.screenY
        this.icon?.style?.setProperty('transform', 'translate(' + x + 'px,' + y + 'px)')
      },
      onTouchEnd(e : TouchEvent) {
        if (e.touches.length == 0) {
          this.resetIcon()
          this.touchEvent = null
        }
      },
      onTouchCancel(_ : TouchEvent) {
        this.resetIcon()
        this.touchEvent = null
      },
      resetIcon() {
        this.move = false;
        this.posX = 0;
        this.posY = 0;
        this.icon?.style?.setProperty('transform', 'translate(0px,0px)')
      }
    }
  }
</script>

<style>
  .container {
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  .view-box {
    width: 300px;
    height: 300px;
    align-items: center;
    justify-content: center;
    border-style: solid;
  }

  .icon {
    width: 100px;
    height: 100px;
  }

  .title1 {
    margin-top: 10px;
    font-size: 18px;
  }

  .title2 {
    margin-top: 5px;
    font-size: 16px;
  }
127
</style>