feat(range): 适配支付宝小程序

jd-opensource · Dec 27, 2018 · 79d1c3e · 79d1c3e
1 parent 4436f17
commit 79d1c3e
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 29 deletions.
diff --git a/src/common/utils.ts b/src/common/utils.ts
@@ -2,14 +2,13 @@ import Taro from '@tarojs/taro'
 import { execObject, SelectorQuery } from '@tarojs/taro/types/index'
 
 const ENV = Taro.getEnv()
-const REM_LAYOUT_DELAY: number = 500
 
-function delay (): Promise<null> {
+function delay (delayTime = 500): Promise<null> {
   return new Promise(resolve => {
     if (ENV === Taro.ENV_TYPE.WEB) {
       setTimeout(() => {
         resolve()
-      }, REM_LAYOUT_DELAY)
+      }, delayTime)
       return
     }
     resolve()
@@ -18,13 +17,14 @@ function delay (): Promise<null> {
 
 function delayQuerySelector (
   self,
-  selectorStr: string
+  selectorStr: string,
+  delayTime = 500,
 ): Promise<Array<execObject>> {
   const $scope = ENV === Taro.ENV_TYPE.WEB ? self : self.$scope
   const selector: SelectorQuery = Taro.createSelectorQuery().in($scope)
 
   return new Promise(resolve => {
-    delay().then(() => {
+    delay(delayTime).then(() => {
       selector
         .select(selectorStr)
         .boundingClientRect()
@@ -69,8 +69,79 @@ function uuid (
   return uuid.join('')
 }
 
+interface EventDetail {
+  pageX: number
+  pageY: number
+  clientX: number
+  clientY: number
+  offsetX: number
+  offsetY: number
+  x: number
+  y: number
+}
+
+function getEventDetail(event:any) {
+  let detail: EventDetail
+  switch (ENV) {
+    case Taro.ENV_TYPE.WEB:
+      detail = {
+        pageX: event.pageX,
+        pageY: event.pageY,
+        clientX: event.clientX,
+        clientY: event.clientY,
+        offsetX: event.offsetX,
+        offsetY: event.offsetY,
+        x: event.x,
+        y: event.y
+      }
+      break;
+
+    case Taro.ENV_TYPE.WEAPP:
+      detail = {
+        pageX: event.target.pageX,
+        pageY: event.target.pageY,
+        clientX: event.touches[0].clientX,
+        clientY: event.touches[0].clientY,
+        offsetX: event.target.offsetLeft,
+        offsetY: event.target.offsetTop,
+        x: event.target.x,
+        y: event.target.y
+      }
+      break;
+
+    case Taro.ENV_TYPE.ALIPAY:
+      detail = {
+        pageX: event.target.pageX,
+        pageY: event.target.pageY,
+        clientX: event.target.clientX,
+        clientY: event.target.clientY,
+        offsetX: event.target.offsetLeft,
+        offsetY: event.target.offsetTop,
+        x: event.target.x,
+        y: event.target.y
+      }
+      break;
+
+    default:
+      detail = {
+        pageX: 0,
+        pageY: 0,
+        clientX: 0,
+        clientY: 0,
+        offsetX: 0,
+        offsetY: 0,
+        x: 0,
+        y: 0,
+      }
+      console.warn('getEventDetail暂未支持该环境')
+      break;
+  }
+  return detail
+}
+
 export {
   delay,
   delayQuerySelector,
-  uuid
+  uuid,
+  getEventDetail
 }
diff --git a/src/components/range/index.js b/src/components/range/index.js
@@ -2,6 +2,7 @@ import Taro from '@tarojs/taro'
 import PropTypes from 'prop-types'
 import { View } from '@tarojs/components'
 import classNames from 'classnames'
+import { uuid, delayQuerySelector, getEventDetail } from '../../common/utils'
 import AtComponent from '../../common/component'
 
 export default class AtRange extends AtComponent {
@@ -14,6 +15,7 @@ export default class AtRange extends AtComponent {
     this.left = 0
     this.deltaValue = max - min
     this.currentSlider = ''
+    this.rangeId = uuid()
     this.state = {
       slider1X: 0,
       slider2X: 0
@@ -22,13 +24,9 @@ export default class AtRange extends AtComponent {
 
   handleClick (event) {
     if (this.currentSlider && !this.props.disabled) {
-      const env = Taro.getEnv()
       let sliderValue = 0
-      if (env === Taro.ENV_TYPE.WEB) {
-        sliderValue = event.pageX - this.left
-      } else if (env === Taro.ENV_TYPE.WEAPP) {
-        sliderValue = event.target.x - this.left
-      }
+      const detail = getEventDetail(event)
+      sliderValue = detail.x - this.left
       this.setSliderValue(this.currentSlider, sliderValue, 'onChange')
     }
   }
@@ -108,26 +106,15 @@ export default class AtRange extends AtComponent {
 
   componentDidMount () {
     // 获取 range 宽度
-    const env = Taro.getEnv()
     const { value } = this.props
-    // 异步解决获取 offsetWidth 不准确问题
-    setTimeout(() => {
-      if (env === Taro.ENV_TYPE.WEB) {
-        this.width = Math.round(this.rangeRef.vnode.dom.offsetWidth)
-        this.left = Math.round(this.rangeRef.vnode.dom.offsetLeft)
+    delayQuerySelector(this, `#${this.rangeId}`, 0)
+      .then(rect => {
+        this.width = Math.round(rect[0].width)
+        this.left = Math.round(rect[0].left)
         this.setValue(value)
-      } else if (env === Taro.ENV_TYPE.WEAPP) {
-        this.rangeRef.boundingClientRect(rect => {
-          this.width = Math.round(rect.width)
-          this.left = Math.round(rect.left)
-          this.setValue(value)
-        }).exec()
-      }
-    })
+      })
   }
 
-  getRangeRef = node => (this.rangeRef = node)
-
   render () {
     const {
       className,
@@ -175,9 +162,9 @@ export default class AtRange extends AtComponent {
         onClick={this.handleClick.bind(this)}
       >
         <View
+          id={this.rangeId}
           className='at-range__container'
           style={containerStyle}
-          ref={this.getRangeRef}
         >
           <View
             className='at-range__rail'