提交 824c1828 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬

feat(component): general event

上级 bb4d8a13
...@@ -164,6 +164,12 @@ ...@@ -164,6 +164,12 @@
"navigationBarTitleText": "redirectPage" "navigationBarTitleText": "redirectPage"
} }
}, },
{
"path": "pages/component/general-event/general-event",
"style": {
"navigationBarTitleText": "general-event"
}
},
{ {
"path": "pages/tabBar/API", "path": "pages/tabBar/API",
"style": { "style": {
...@@ -729,7 +735,8 @@ ...@@ -729,7 +735,8 @@
"navigationBarTitleText": "日历", "navigationBarTitleText": "日历",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
}, { },
{
"path": "pages/template/custom-refresher/custom-refresher", "path": "pages/template/custom-refresher/custom-refresher",
"style": { "style": {
"navigationBarTitleText": "自定义下拉刷新", "navigationBarTitleText": "自定义下拉刷新",
...@@ -742,13 +749,15 @@ ...@@ -742,13 +749,15 @@
"navigationBarTitleText": "", "navigationBarTitleText": "",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
}, { },
{
"path": "pages/template/half-screen/half-screen", "path": "pages/template/half-screen/half-screen",
"style": { "style": {
"navigationBarTitleText": "半屏弹窗", "navigationBarTitleText": "半屏弹窗",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
}, { },
{
"path": "pages/template/long-list/long-list", "path": "pages/template/long-list/long-list",
"style": { "style": {
"navigationBarTitleText": "复杂长列表", "navigationBarTitleText": "复杂长列表",
......
<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt container">
<view
class="target"
@click="onClick"
@touchstart="onTouchStart"
@touchmove="onTouchMove"
@touchend="onTouchEnd"
></view>
<view v-if="clickEvent !== null">
<text class="title1">click Event: </text>
<text>x: {{ clickEvent!.x }}, y: {{ clickEvent!.y }}</text>
</view>
<view v-if="touchStartEvent !== null">
<text class="title1">touchStart Event: </text>
<text class="title2">touches: </text>
<template
v-for="(touch, index) in touchStartEvent!.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 touchStartEvent!.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>
</view>
<view v-if="touchMoveEvent !== null">
<text class="title1">touchMove Event: </text>
<text class="title2">touches: </text>
<template
v-for="(touch, index) in touchMoveEvent!.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 touchMoveEvent!.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>
</view>
<view v-if="touchEndEvent !== null">
<text class="title1">touchEnd Event: </text>
<text class="title2">touches: </text>
<template
v-if="touchEndEvent!.touches.length > 0"
v-for="(touch, index) in touchEndEvent!.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 touchEndEvent!.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>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="uts">
export default {
data() {
return {
title: 'general-event',
clickEvent: null as MouseEvent | null,
touchStartEvent: null as TouchEvent | null,
touchMoveEvent: null as TouchEvent | null,
touchEndEvent: null as TouchEvent | null,
}
},
methods: {
onClick(e: MouseEvent){
this.clickEvent = e
},
onTouchStart(e: TouchEvent){
this.touchStartEvent = e
},
onTouchMove(e: TouchEvent){
this.touchMoveEvent = e
},
onTouchEnd(e: TouchEvent){
this.touchEndEvent = e
}
},
}
</script>
<style>
.container {
padding-bottom: 1000px;
}
.target {
margin: 20px 0 0 50px;
width: 200px;
height: 100px;
background-color: aqua;
}
.title1 {
margin-top: 15px;
font-size: 20px;
}
.title2 {
margin-top: 10px;
font-size: 18px;
}
.title3 {
margin-top: 5px;
font-size: 16px;
}
</style>
...@@ -272,8 +272,8 @@ export default { ...@@ -272,8 +272,8 @@ export default {
}, },
{ {
name: '通用事件', name: '通用事件',
url: 'general-event', url: '/pages/component/general-event/general-event',
enable: false, enable: true,
}, },
] as Page[], ] as Page[],
}, },
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册