Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5996
Star 90
Fork 162
H
hello uni-app x
提交 a3abe056 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬
浏览文件
操作

feat: longPress

上级 5fead72f
显示空白变更内容
内联 并排
Showing with 108 addition and 23 deletion
pages/component/general-event/general-event.uvue
浏览文件 @ a3abe056
...@@ -5,56 +5,139 @@ ...@@ -5,56 +5,139 @@
<view> <view>
<page-head :title="title"></page-head> <page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt container"> <view class="uni-padding-wrap uni-common-mt container">
<view class="target" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" @tap="onTap" @click="onClick" @longpress="onLongPress"></view> <view
class="target"
@touchstart="onTouchStart"
@touchmove="onTouchMove"
@touchend="onTouchEnd"
@tap="onTap"
@click="onClick"
@longpress="onLongPress"
></view>
<view v-if="touchStartEvent !== null"> <view v-if="touchStartEvent !== null">
<text class="title1">touchStart Event: </text> <text class="title1">touchStart Event: </text>
<text class="title2">touches: </text> <text class="title2">touches: </text>
<template v-for="(touch, index) in touchStartEvent!.touches" :key="index"> <template
v-for="(touch, index) in touchStartEvent!.touches"
:key="index"
>
<text class="title3">touch[{{ index }}]:</text> <text class="title3">touch[{{ index }}]:</text>
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text> <text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text> <text
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text> >clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text
>
<text
>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text
>
</template> </template>
<text class="title2 uni-common-mt">changedTouches: </text> <text class="title2 uni-common-mt">changedTouches: </text>
<template v-for="(touch, index) in touchStartEvent!.changedTouches" :key="index"> <template
v-for="(touch, index) in touchStartEvent!.changedTouches"
:key="index"
>
<text class="title3">touch[{{ index }}]:</text> <text class="title3">touch[{{ index }}]:</text>
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text> <text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text> <text
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text> >clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text
>
<text
>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text
>
</template> </template>
</view> </view>
<view v-if="touchMoveEvent !== null"> <view v-if="touchMoveEvent !== null">
<text class="title1">touchMove Event: </text> <text class="title1">touchMove Event: </text>
<text class="title2">touches: </text> <text class="title2">touches: </text>
<template v-for="(touch, index) in touchMoveEvent!.touches" :key="index"> <template
v-for="(touch, index) in touchMoveEvent!.touches"
:key="index"
>
<text class="title3">touch[{{ index }}]:</text> <text class="title3">touch[{{ index }}]:</text>
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text> <text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text> <text
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text> >clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text
>
<text
>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text
>
</template> </template>
<text class="title2 uni-common-mt">changedTouches: </text> <text class="title2 uni-common-mt">changedTouches: </text>
<template v-for="(touch, index) in touchMoveEvent!.changedTouches" :key="index"> <template
v-for="(touch, index) in touchMoveEvent!.changedTouches"
:key="index"
>
<text class="title3">touch[{{ index }}]:</text> <text class="title3">touch[{{ index }}]:</text>
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text> <text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text> <text
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text> >clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text
>
<text
>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text
>
</template>
</view>
<view v-if="longPressEvent !== null">
<text class="title1">longPress Event: </text>
<text class="title2">touches: </text>
<template
v-if="longPressEvent!.touches.length > 0"
v-for="(touch, index) in longPressEvent!.touches"
:key="index"
>
<text class="title3">touch[{{ index }}]:</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>
<text class="title2 uni-common-mt">changedTouches: </text>
<template
v-for="(touch, index) in longPressEvent!.changedTouches"
:key="index"
>
<text class="title3">touch[{{ index }}]:</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> </template>
</view> </view>
<view v-if="touchEndEvent !== null"> <view v-if="touchEndEvent !== null">
<text class="title1">touchEnd Event: </text> <text class="title1">touchEnd Event: </text>
<text class="title2">touches: </text> <text class="title2">touches: </text>
<template v-if="touchEndEvent!.touches.length > 0" v-for="(touch, index) in touchEndEvent!.touches" :key="index"> <template
v-if="touchEndEvent!.touches.length > 0"
v-for="(touch, index) in touchEndEvent!.touches"
:key="index"
>
<text class="title3">touch[{{ index }}]:</text> <text class="title3">touch[{{ index }}]:</text>
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text> <text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text> <text
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text> >clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text
>
<text
>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text
>
</template> </template>
<text class="title2 uni-common-mt">changedTouches: </text> <text class="title2 uni-common-mt">changedTouches: </text>
<template v-for="(touch, index) in touchEndEvent!.changedTouches" :key="index"> <template
v-for="(touch, index) in touchEndEvent!.changedTouches"
:key="index"
>
<text class="title3">touch[{{ index }}]:</text> <text class="title3">touch[{{ index }}]:</text>
<text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text> <text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
<text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text> <text
<text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text> >clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text
>
<text
>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text
>
</template> </template>
</view> </view>
<view v-if="tapEvent !== null"> <view v-if="tapEvent !== null">
...@@ -81,6 +164,7 @@ export default { ...@@ -81,6 +164,7 @@ export default {
onTouchMoveTime: 0, onTouchMoveTime: 0,
touchMoveEvent: null as TouchEvent | null, touchMoveEvent: null as TouchEvent | null,
onTouchEndTime: 0, onTouchEndTime: 0,
longPressEvent: null as TouchEvent | null,
touchEndEvent: null as TouchEvent | null, touchEndEvent: null as TouchEvent | null,
onTapTime: 0, onTapTime: 0,
tapEvent: null as MouseEvent | null, tapEvent: null as MouseEvent | null,
...@@ -100,6 +184,11 @@ export default { ...@@ -100,6 +184,11 @@ export default {
this.onTouchMoveTime = Date.now() this.onTouchMoveTime = Date.now()
console.log('onTouchMove') console.log('onTouchMove')
}, },
onLongPress(e: TouchEvent){
this.longPressEvent = e
this.onLongPressTime = Date.now()
console.log('onLongPress')
},
onTouchEnd(e: TouchEvent){ onTouchEnd(e: TouchEvent){
this.touchEndEvent = e this.touchEndEvent = e
this.onTouchEndTime = Date.now() this.onTouchEndTime = Date.now()
...@@ -115,10 +204,6 @@ export default { ...@@ -115,10 +204,6 @@ export default {
this.onClickTime = Date.now() this.onClickTime = Date.now()
console.log('onClick') console.log('onClick')
}, },
onLongPress(){
this.onLongPressTime = Date.now()
console.log('onLongPress')
},
}, },
} }
</script> </script>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或