fix(h5): 为H5的View组件添加长按时间onLongPress支持，fix #2857

NervJS · May 29, 2019 · 460fd70 · 460fd70
1 parent 23acaa7
commit 460fd70
Showing 1 changed file with 17 additions and 0 deletions.
diff --git a/packages/taro-components/src/components/view/index.js b/packages/taro-components/src/components/view/index.js
@@ -13,6 +13,8 @@ class View extends Nerv.Component {
     }
   }
 
+  timeoutEvent = 0;
+  startTime = 0;
   render () {
     const {
       hoverClass,
@@ -45,8 +47,22 @@ class View extends Nerv.Component {
         }, hoverStartTime)
       }
       onTouchStart && onTouchStart(e)
+      if (this.props.onLongPress) {
+        this.timeoutEvent = setTimeout(() => {
+          this.props.onLongPress()
+        }, 500)
+        this.startTime = (new Date()).getTime()
+      }
+    }
+    const _onTouchMove = e => {
+      clearTimeout(this.timeoutEvent)
     }
+
     const _onTouchEnd = e => {
+      const spanTime = (new Date().getTime()) - this.startTime
+      if (spanTime < 350) {
+        clearTimeout(this.timeoutEvent)
+      }
       if (hoverClass) {
         this.setState(() => ({
           touch: false
@@ -75,6 +91,7 @@ class View extends Nerv.Component {
         className={cls}
         onTouchStart={_onTouchStart}
         onTouchEnd={_onTouchEnd}
+        onTouchMove={_onTouchMove}
       >
         {this.props.children}
       </div>