EveryLike/pages/component/global-events/touch-events-case.uvue

<template>
	<view>
		<swiper ref="header" class="h-300" indicator-dots="true" circular="true" @change="swiperChange" @touchstart="swiperTouchStart" @touchmove="swiperTouchMove" @touchend="swiperTouchEnd">
			<swiper-item v-for="i in 3" :item-id="i" @touchstart="swiperItemTouchStart" @touchmove="swiperItemTouchMove" @touchend="swiperItemTouchEnd">
				<view class="h-300 header-tiem" @touchstart="viewTouchStart" @touchmove="viewTouchMove" @touchend="viewTouchEnd">
					<text>{{ i }}</text>
				</view>
			</swiper-item>
		</swiper>
    <view class="content">
      <boolean-data :defaultValue="false" title="stopPropagation" @change="changeStopPropagation"></boolean-data>
      <boolean-data :defaultValue="false" title="preventDefault" @change="changePreventDefault"></boolean-data>
      <text style="padding: 10px;">{{ touchResult }}</text>
      <view class="uni-padding-wrap uni-common-mt" style="bottom: 20px;">
        <navigator url="/pages/component/global-events/touch-events-preventDefault" hover-class="none">
          <button type="default" class="button">
            测试 preventDefault
          </button>
        </navigator>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperChangeEvent: false,
				viewTouchEvent: false,
				swiperItemTouchEvent: false,
				swiperTouchEvent: false,
        stopPropagation: false,
        preventDefault: false,
        touchResult: ""
			}
		},
		methods: {
      changeStopPropagation(value: boolean) {
        this.stopPropagation = value
      },
      changePreventDefault(value: boolean) {
        this.preventDefault = value
      },
			swiperChange(e: UniSwiperChangeEvent) {
				console.log("swiperChange", e.detail.current)
				this.swiperChangeEvent = true
			},
			viewTouchStart(e: UniTouchEvent) {
				console.log("viewTouchStart")
        this.touchResult = "viewTouchStart"
				this.viewTouchEvent = true
        if (this.stopPropagation) e.stopPropagation()
				if (this.preventDefault) e.preventDefault()
			},
      viewTouchMove(e: UniTouchEvent) {
        console.log("viewTouchMove")
        this.touchResult = "viewTouchMove"
        this.viewTouchEvent = true
        if (this.stopPropagation) e.stopPropagation()
				if (this.preventDefault) e.preventDefault()
      },
      viewTouchEnd(e: UniTouchEvent) {
        console.log("viewTouchEnd")
        this.touchResult = "viewTouchEnd"
        if (this.stopPropagation) e.stopPropagation()
      },
			swiperItemTouchStart(e: UniTouchEvent) {
				console.log("swiperItemTouchStart")
        this.touchResult += " -> swiperItemTouchStart"
				this.swiperItemTouchEvent = true
			},
      swiperItemTouchMove(e: UniTouchEvent) {
        console.log("swiperItemTouchMove")
        this.touchResult += " -> swiperItemTouchMove"
      },
      swiperItemTouchEnd(e: UniTouchEvent) {
        console.log("swiperItemTouchEnd")
        this.touchResult += " -> swiperItemTouchEnd"
      },
			swiperTouchStart(e: UniTouchEvent) {
				console.log("swiperTouchStart")
        this.touchResult += " -> swiperTouchStart"
				this.swiperTouchEvent = true
			},
      swiperTouchMove(e: UniTouchEvent) {
        console.log("swiperTouchMove")
        this.touchResult += " -> swiperTouchMove"
      },
      swiperTouchEnd(e: UniTouchEvent) {
        console.log("swiperTouchEnd")
        this.touchResult += " -> swiperTouchEnd"
      },
      resetEvent() {
        this.swiperChangeEvent = false
        this.viewTouchEvent = false
        this.swiperItemTouchEvent = false
        this.swiperTouchEvent = false
        this.stopPropagation = true
        this.preventDefault = true
      },
      isPassTest1() {
        console.log("swiperChangeEvent:", this.swiperChangeEvent)
        return this.swiperChangeEvent == false
      },
      isPassTest2() {
        console.log("viewTouchEvent:", this.viewTouchEvent)
        console.log("swiperItemTouchEvent:", this.swiperItemTouchEvent)
        console.log("swiperTouchEvent:", this.swiperTouchEvent)
        return this.viewTouchEvent == true && this.swiperItemTouchEvent == true  && this.swiperTouchEvent == true
      }
		}
	}
</script>

<style>
  .h-300{
    height: 300px;
  }
  
	.header-tiem {
		background-color: #89ff8d;
		align-items: center;
		justify-content: center;
	}
</style>