feat(component): general event

pages.json

@@ -164,6 +164,12 @@
         "navigationBarTitleText": "redirectPage"
       }
     },
+    {
+      "path": "pages/component/general-event/general-event",
+      "style": {
+        "navigationBarTitleText": "general-event"
+      }
+    },
     {
       "path": "pages/tabBar/API",
       "style": {
@@ -729,7 +735,8 @@
         "navigationBarTitleText": "日历",
         "enablePullDownRefresh": false
       }
-    }, {
+    },
+    {
       "path": "pages/template/custom-refresher/custom-refresher",
       "style": {
         "navigationBarTitleText": "自定义下拉刷新",
@@ -742,13 +749,15 @@
         "navigationBarTitleText": "",
         "enablePullDownRefresh": false
       }
-    }, {
+    },
+    {
       "path": "pages/template/half-screen/half-screen",
       "style": {
         "navigationBarTitleText": "半屏弹窗",
         "enablePullDownRefresh": false
       }
-    }, {
+    },
+    {
       "path": "pages/template/long-list/long-list",
       "style": {
         "navigationBarTitleText": "复杂长列表",

pages/component/general-event/general-event.uvue

+<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>

pages/tabBar/component.uvue

@@ -272,8 +272,8 @@ export default {
             },
             {
               name: '通用事件',
-              url: 'general-event',
-              enable: false,
+              url: '/pages/component/general-event/general-event',
+              enable: true,
             },
           ] as Page[],
         },