fix(swipe-action): 修复在 h5 环境下点击事件失效的问题

NervJS · Jan 17, 2024 · 1ef87d2 · 1ef87d2
1 parent 545951e
commit 1ef87d2
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 46 deletions.
diff --git a/packages/taro-ui-demo/src/pages/action/swipe-action/index.tsx b/packages/taro-ui-demo/src/pages/action/swipe-action/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { AtButton, AtList, AtListItem, AtSwipeAction } from 'taro-ui'
-import { SwipeActionOption } from 'types/swipe-action'
+import { SwipeActionOption } from 'taro-ui/types/swipe-action'
 import { View } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import DocsHeader from '../../components/doc-header'
@@ -33,8 +33,10 @@ interface SwipeActionPageState {
   list: ActionListItem[]
 }
 
+interface SwipeActionPageProps {}
+
 export default class SwipeActionPage extends React.Component<
-  {},
+  SwipeActionPageProps,
   SwipeActionPageState
 > {
   public constructor(props: any) {
@@ -171,7 +173,10 @@ export default class SwipeActionPage extends React.Component<
 
           <View className='panel'>
             <View className='panel__title'>使用变量控制开关</View>
-            <View className='panel__controller' style={{marginBottom: '10px'}}>
+            <View
+              className='panel__controller'
+              style={{ marginBottom: '10px' }}
+            >
               <AtButton size='small' onClick={this.handleStatusClick}>
                 当前状态: {isOpened2 ? '开' : '关'}{' '}
               </AtButton>
@@ -208,6 +213,7 @@ export default class SwipeActionPage extends React.Component<
 
           <View className='panel'>
             <View className='panel__title'>传递点击事件</View>
+
             <View className='panel__content no-padding'>
               <View className='example-item example-item--border'>
                 <AtSwipeAction onClick={this.handleClick} options={OPTIONS}>

diff --git a/packages/taro-ui/rn/components/swipe-action/index.tsx b/packages/taro-ui/rn/components/swipe-action/index.tsx
@@ -21,11 +21,10 @@ export default class AtSwipeAction extends React.Component<
   private maxOffsetSize: number
   private moveX: number
   private eleWidth: number
-  private moveRatio: number
 
   public constructor(props: AtSwipeActionProps) {
     super(props)
-    const { isOpened, maxDistance, areaWidth, moveRatio } = props
+    const { isOpened, maxDistance, areaWidth } = props
     this.maxOffsetSize = maxDistance
     this.state = {
       componentId: uuid(),
@@ -36,7 +35,6 @@ export default class AtSwipeAction extends React.Component<
     }
     this.moveX = this.state.offsetSize
     this.eleWidth = areaWidth
-    this.moveRatio = moveRatio || 0.5
   }
 
   public UNSAFE_componentWillReceiveProps(nextProps: AtSwipeActionProps): void {
@@ -108,22 +106,8 @@ export default class AtSwipeAction extends React.Component<
   }
 
   onTouchEnd = e => {
-    if (this.moveX === -this.maxOffsetSize) {
-      this._reset(true)
-      this.handleOpened(e)
-      return
-    }
-    if (this.moveX === 0) {
-      this._reset(false)
-      this.handleClosed(e)
-      return
-    }
-    if (this.state._isOpened && this.moveX < 0) {
-      this._reset(false)
-      this.handleClosed(e)
-      return
-    }
-    if (Math.abs(this.moveX) < this.maxOffsetSize * this.moveRatio) {
+    const { maxOffsetSize } = this.state
+    if (Math.abs(this.moveX) < maxOffsetSize / 2) {
       this._reset(false)
       this.handleClosed(e)
     } else {

diff --git a/packages/taro-ui/src/components/swipe-action/index.tsx b/packages/taro-ui/src/components/swipe-action/index.tsx
@@ -20,11 +20,10 @@ export default class AtSwipeAction extends React.Component<
   public static propTypes: InferProps<AtSwipeActionProps>
 
   private moveX: number
-  private moveRatio: number
 
   public constructor(props: AtSwipeActionProps) {
     super(props)
-    const { isOpened, moveRatio } = props
+    const { isOpened } = props
     this.state = {
       componentId: uuid(),
       // eslint-disable-next-line no-extra-boolean-cast
@@ -35,7 +34,6 @@ export default class AtSwipeAction extends React.Component<
       maxOffsetSize: 0
     }
     this.moveX = this.state.offsetSize
-    this.moveRatio = moveRatio || 0.5
   }
 
   public componentDidMount(): void {
@@ -148,22 +146,7 @@ export default class AtSwipeAction extends React.Component<
 
   onTouchEnd = e => {
     const { maxOffsetSize } = this.state
-    if (this.moveX === -maxOffsetSize) {
-      this._reset(true)
-      this.handleOpened(e)
-      return
-    }
-    if (this.moveX === 0) {
-      this._reset(false)
-      this.handleClosed(e)
-      return
-    }
-    if (this.state._isOpened && this.moveX < 0) {
-      this._reset(false)
-      this.handleClosed(e)
-      return
-    }
-    if (Math.abs(this.moveX) < maxOffsetSize * this.moveRatio) {
+    if (Math.abs(this.moveX) < maxOffsetSize / 2) {
       this._reset(false)
       this.handleClosed(e)
     } else {

diff --git a/packages/taro-ui/types/swipe-action.d.ts b/packages/taro-ui/types/swipe-action.d.ts
@@ -65,11 +65,6 @@ export interface AtSwipeActionProps extends AtComponent {
    * @deprecated 已废弃，无需设置 areaWidth
    */
   areaWidth?: number
-
-  /**
-   * 判断是否需要打开的比例阈值，即 滑块滑动距离 / 滑块最大滑动距离， 默认为 0.5
-   */
-  moveRatio?: number
 }
 
 export interface AtSwipeActionState {