diff --git a/packages/nutui-harmony/entry/src/main/resources/base/profile/main_pages.json b/packages/nutui-harmony/entry/src/main/resources/base/profile/main_pages.json
index 23cbdd6c0e..106d37757a 100644
--- a/packages/nutui-harmony/entry/src/main/resources/base/profile/main_pages.json
+++ b/packages/nutui-harmony/entry/src/main/resources/base/profile/main_pages.json
@@ -54,10 +54,10 @@
     "feedback/pages/popover/index",
     "feedback/pages/popup/index",
     "feedback/pages/pulltorefresh/index",
-    "feedback/pages/resultpage/index",
     "feedback/pages/skeleton/index",
     "feedback/pages/swipe/index",
     "feedback/pages/toast/index",
+    "feedback/pages/resultpage/index",
     "exhibition/pages/animate/index",
     "exhibition/pages/animatingnumbers/index",
     "exhibition/pages/avatar/index",
@@ -88,4 +88,4 @@
     "designWidth": 375,
     "autoDesignWidth": false
   }
-}
\ No newline at end of file
+}
diff --git a/packages/nutui-taro-demo-rn/scripts/taro/adapted.js b/packages/nutui-taro-demo-rn/scripts/taro/adapted.js
index 1c319e2832..0829e85635 100644
--- a/packages/nutui-taro-demo-rn/scripts/taro/adapted.js
+++ b/packages/nutui-taro-demo-rn/scripts/taro/adapted.js
@@ -31,4 +31,5 @@ exports = module.exports = [
   'inputnumber',
   'configprovider',
   'input',
+  'swipe',
 ]
diff --git a/packages/nutui-taro-demo-rn/src/app.config.ts b/packages/nutui-taro-demo-rn/src/app.config.ts
index 09885cd1a1..8c9e8edcfd 100644
--- a/packages/nutui-taro-demo-rn/src/app.config.ts
+++ b/packages/nutui-taro-demo-rn/src/app.config.ts
@@ -1,3 +1,4 @@
+
 const subPackages = [
   {
     "root": "base",
@@ -132,4 +133,4 @@ export default defineAppConfig ({
     navigationBarTitleText: 'NutUI-React',
     navigationBarTextStyle: 'black'
   }
-})
+})
\ No newline at end of file
diff --git a/packages/nutui-taro-demo-rn/src/feedback/pages/swipe/index.config.ts b/packages/nutui-taro-demo-rn/src/feedback/pages/swipe/index.config.ts
index 32dc8be3e6..1027c16b25 100644
--- a/packages/nutui-taro-demo-rn/src/feedback/pages/swipe/index.config.ts
+++ b/packages/nutui-taro-demo-rn/src/feedback/pages/swipe/index.config.ts
@@ -1,3 +1,3 @@
 export default {
-  navigationBarTitleText: 'Swipe',
+  navigationBarTitleText: 'Swipe'
 }
\ No newline at end of file
diff --git a/packages/nutui-taro-demo-rn/src/feedback/pages/swipe/index.tsx b/packages/nutui-taro-demo-rn/src/feedback/pages/swipe/index.tsx
index 039e05e8ec..cbd2751ed8 100644
--- a/packages/nutui-taro-demo-rn/src/feedback/pages/swipe/index.tsx
+++ b/packages/nutui-taro-demo-rn/src/feedback/pages/swipe/index.tsx
@@ -1 +1,2 @@
-export default <>button</>;
\ No newline at end of file
+import Demo from '@/packages/swipe/demo.taro';
+export default Demo;
\ No newline at end of file
diff --git a/src/packages/swipe/demo.taro.tsx b/src/packages/swipe/demo.taro.tsx
index 69171235f0..0e658a6789 100644
--- a/src/packages/swipe/demo.taro.tsx
+++ b/src/packages/swipe/demo.taro.tsx
@@ -1,554 +1,78 @@
-import React, { useRef, useState } from 'react'
-import Taro, { pxTransform } from '@tarojs/taro'
-import { View, Text } from '@tarojs/components'
-import { Del } from '@nutui/icons-react-taro'
-import {
-  Button,
-  Cell,
-  // Toast,
-  // Dialog,
-  // InputNumber,
-  Swipe,
-} from '@nutui/nutui-react-taro'
+import React from 'react'
+import Taro from '@tarojs/taro'
+import { ScrollView, View } from '@tarojs/components'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
-
-type TSwipeDemo = {
-  title1: string
-  title2: string
-  title3: string
-  title4: string
-  title5: string
-  title6: string
-  title7: string
-  openOrClose: string
-  title8: string
-  title9: string
-  click: string
-  sure: string
-  del: string
-  alwaysbuy: string
-  liked: string
-  choose: string
-  event: string
-  goods: string
-  collect: string
-  open: string
-  close: string
-  closeLeft: string
-  tips: string
-  cart: string
-  leftDel: string
-  disabled: string
-  chooseTips: string
-  deleteTips: string
-}
+import Demo1 from './demos/taro/demo1'
+import Demo2 from './demos/taro/demo2'
+import Demo3 from './demos/taro/demo3'
+import Demo4 from './demos/taro/demo4'
+import Demo5 from './demos/taro/demo5'
+import Demo6 from './demos/taro/demo6'
+import Demo7 from './demos/taro/demo7'
+import Demo8 from './demos/taro/demo8'
+import Demo9 from './demos/taro/demo9'
 
 const SwipeDemo = () => {
-  const [translated] = useTranslate<TSwipeDemo>({
+  const [translated] = useTranslate({
     'zh-CN': {
-      title1: '基础用法',
-      title2: '禁用滑动',
-      title3: '事件监听',
-      title4: '非同步控制',
-      title5: '自定义內容',
-      title6: '通过实例方法控制',
-      openOrClose: '点击下方按钮打开或关闭',
-      title7: '点击关闭',
-      title8: '阻止父元素滚动',
-      title9: '卡片场景',
-      click: '点击',
-      sure: '确定',
-      del: '删除',
-      alwaysbuy: '设置常购',
-      liked: '看相似',
-      choose: '选择',
-      event: '事件',
-      goods: '商品',
-      collect: '移入收藏',
-      open: '打开',
-      close: '关闭',
-      closeLeft: '点击右侧按钮关闭',
-      tips: '提示',
-      cart: '加入购物车',
-      leftDel: '左滑',
+      base: '基础用法',
+      card: '卡片场景',
+      catchMove: '阻止父元素滚动',
+      byRef: '通过实例方法控制',
+      close: '点击关闭',
       disabled: '禁用滑动',
-      chooseTips: '确定选择吗？',
-      deleteTips: '确定删除吗？',
+      event: '事件监听',
+      async: '异步控制',
+      custom: '自定义内容',
     },
     'zh-TW': {
-      title1: '基礎用法',
-      title2: '禁用滑動',
-      title3: '事件監聽',
-      title4: '非同步控制',
-      title5: '自定義內容',
-      title6: '通過實例方法控制',
-      openOrClose: '點擊下方按鈕打開或關閉',
-      title7: '点击关闭',
-      title8: '阻止父元素滾動',
-      title9: '卡片場景',
-      click: '點擊',
-      sure: '確定',
-      del: '刪除',
-      alwaysbuy: '设置常购',
-      liked: '看相似',
-      choose: '選擇',
-      event: '事件',
-      goods: '商品',
-      collect: '收藏',
-      open: '打開',
-      close: '關閉',
-      closeLeft: '點擊右側按鈕關閉',
-      tips: '提示',
-      cart: '加入購物車',
-      leftDel: '左滑',
+      base: '基礎用法',
+      card: '卡片場景',
+      catchMove: '阻止父元素滾動',
+      byRef: '通過實例方法控制',
+      close: '點擊關閉',
       disabled: '禁用滑動',
-      chooseTips: '確定選擇嗎？ ',
-      deleteTips: '確定刪除嗎？ ',
+      event: '事件監聽',
+      async: '異步控制',
+      custom: '自定義內容',
     },
     'en-US': {
-      title1: 'Basic usage',
-      title2: 'Disable sliding',
-      title3: 'Event monitoring',
-      title4: 'Asynchronous control',
-      title5: 'Custom content',
-      title6: 'Control via instance method',
-      openOrClose: 'Click the button below',
-      title7: 'Click to close',
-      title8: 'Prevent parent scrolling',
-      title9: 'Card mode',
-      click: 'click',
-      sure: 'ok',
-      del: 'delete',
-      alwaysbuy: 'always buy',
-      liked: 'liked',
-      choose: 'select',
-      event: 'event',
-      goods: 'goods',
-      collect: 'collect',
-      open: 'open',
-      close: 'close',
-      closeLeft: 'Click the right button to close',
-      tips: 'tips',
-      cart: 'add to shopping cart',
-      leftDel: 'left slide',
-      disabled: 'Disable sliding',
-      chooseTips: 'are you sure to choose?',
-      deleteTips: 'are you sure to delete?',
+      base: 'Basic Usage',
+      card: 'Card Scenario',
+      catchMove: 'Prevent Parent Element Scrolling',
+      byRef: 'Control via Instance Methods',
+      close: 'Click to Close',
+      disabled: 'Disable Sliding',
+      event: 'Event Listener',
+      async: 'Asynchronous Control',
+      custom: 'Custom Content',
     },
   })
-  const [show, SetShow] = useState(false)
-  const [toastMsg, SetToastMsg] = useState('')
-  const [showDialog, setShowDialog] = useState(false)
-  const toastShow = (msg: any) => {
-    SetToastMsg(msg)
-    SetShow(true)
-  }
-
-  const refDom = useRef<any>(null)
-  const handleChange = () => {
-    toastShow(translated.click)
-  }
-  const pRef = useRef('left')
-  const beforeClose = (postion: string) => {
-    pRef.current = postion
-    setShowDialog(true)
-  }
 
-  const handleClose = () => {
-    toastShow('close')
-  }
-
-  const closeRef = useRef(null)
-  const openRef = useRef(null)
-  const [shouldCatchMove, setShouldCatchMove] = useState(false)
-
-  const divNode = (text: string, style: any, hasIcon: boolean = true) => {
-    return (
-      <div
-        style={{
-          width: pxTransform(60),
-          height: pxTransform(104),
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          fontSize: pxTransform(14),
-          alignSelf: 'stretch',
-          alignItems: 'center',
-          ...style,
-        }}
-      >
-        {hasIcon ? <Del style={{ marginBottom: '8px' }} /> : null}
-        <Text
-          style={{
-            width: pxTransform(60),
-            textAlign: 'center',
-            fontSize: pxTransform(14),
-          }}
-        >
-          {text}
-        </Text>
-      </div>
-    )
-  }
   return (
     <>
       <Header />
-      <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
-        <h2>{translated.title1}</h2>
-        <Swipe
-          rightAction={
-            <Button
-              type="primary"
-              shape="square"
-              style={{ alignSelf: 'stretch' }}
-            >
-              {translated.del}
-            </Button>
-          }
-        >
-          <Cell
-            title={translated.leftDel}
-            radius={0}
-            style={{ margin: 0, alignSelf: 'stretch' }}
-          />
-        </Swipe>
-
-        <View className="test-height" />
-
-        {/* <h2>{translated.title9}</h2> */}
-        {/* <Swipe */}
-        {/*  style={{ */}
-        {/*    height: pxTransform(104), */}
-        {/*  }} */}
-        {/*  rightAction={ */}
-        {/*    <div */}
-        {/*      style={{ */}
-        {/*        width: pxTransform(240), */}
-        {/*        height: pxTransform(104), */}
-        {/*        display: 'flex', */}
-        {/*        flexDirection: 'row', */}
-        {/*        fontSize: pxTransform(12), */}
-        {/*        alignSelf: 'stretch', */}
-        {/*        alignItems: 'stretch', */}
-        {/*      }} */}
-        {/*    > */}
-        {/*      <> */}
-        {/*        {divNode(translated.alwaysbuy, { */}
-        {/*          background: '#F7F8FC', */}
-        {/*          color: '#1A1A1A', */}
-        {/*        })} */}
-        {/*        {divNode(translated.collect, { */}
-        {/*          background: '#ffcc00', */}
-        {/*          color: '#FFF', */}
-        {/*        })} */}
-        {/*        {divNode(translated.liked, { */}
-        {/*          background: '#FF860D', */}
-        {/*          color: '#FFF', */}
-        {/*        })} */}
-        {/*        {divNode(translated.del, { */}
-        {/*          background: '#FF0F23', */}
-        {/*          color: '#FFF', */}
-        {/*        })} */}
-        {/*      </> */}
-        {/*    </div> */}
-        {/*  } */}
-        {/* > */}
-        {/*  <Cell title={translated.leftDel} radius={0} /> */}
-        {/* </Swipe> */}
-
-        {/* <br style={{ display: 'block', height: '10px' }} /> */}
-
-        {/* <Swipe */}
-        {/*  style={{ */}
-        {/*    height: pxTransform(104), */}
-        {/*  }} */}
-        {/*  rightAction={ */}
-        {/*    <div */}
-        {/*      style={{ */}
-        {/*        width: pxTransform(240), */}
-        {/*        height: pxTransform(104), */}
-        {/*        display: 'flex', */}
-        {/*        flexDirection: 'row', */}
-        {/*        fontSize: pxTransform(12), */}
-        {/*        alignSelf: 'stretch', */}
-        {/*        alignItems: 'stretch', */}
-        {/*      }} */}
-        {/*    > */}
-        {/*      <> */}
-        {/*        {divNode( */}
-        {/*          translated.alwaysbuy, */}
-        {/*          { */}
-        {/*            background: '#F7F8FC', */}
-        {/*            color: '#1A1A1A', */}
-        {/*          }, */}
-        {/*          false */}
-        {/*        )} */}
-        {/*        {divNode( */}
-        {/*          translated.collect, */}
-        {/*          { */}
-        {/*            background: '#ffcc00', */}
-        {/*            color: '#FFF', */}
-        {/*          }, */}
-        {/*          false */}
-        {/*        )} */}
-        {/*        {divNode( */}
-        {/*          translated.liked, */}
-        {/*          { */}
-        {/*            background: '#FF860D', */}
-        {/*            color: '#FFF', */}
-        {/*          }, */}
-        {/*          false */}
-        {/*        )} */}
-        {/*        {divNode( */}
-        {/*          translated.del, */}
-        {/*          { */}
-        {/*            background: '#FF0F23', */}
-        {/*            color: '#FFF', */}
-        {/*          }, */}
-        {/*          false */}
-        {/*        )} */}
-        {/*      </> */}
-        {/*    </div> */}
-        {/*  } */}
-        {/* > */}
-        {/*  <Cell */}
-        {/*    title={translated.leftDel} */}
-        {/*    radius={0} */}
-        {/*    style={{ margin: 0, alignSelf: 'stretch' }} */}
-        {/*  /> */}
-        {/* </Swipe> */}
-
-        {/* <h2>{translated.title8}</h2> */}
-        {/* <View catchMove={shouldCatchMove}> */}
-        {/*  <Swipe */}
-        {/*    rightAction={ */}
-        {/*      <Button */}
-        {/*        type="primary" */}
-        {/*        shape="square" */}
-        {/*        style={{ alignSelf: 'stretch' }} */}
-        {/*      > */}
-        {/*        {translated.del} */}
-        {/*      </Button> */}
-        {/*    } */}
-        {/*    onTouchEnd={(e) => { */}
-        {/*      setShouldCatchMove(false) */}
-        {/*    }} */}
-        {/*    onTouchMove={(e) => { */}
-        {/*      setShouldCatchMove(true) */}
-        {/*    }} */}
-        {/*  > */}
-        {/*    <Cell */}
-        {/*      title={translated.leftDel} */}
-        {/*      radius={0} */}
-        {/*      style={{ margin: 0, alignSelf: 'stretch' }} */}
-        {/*    /> */}
-        {/*  </Swipe> */}
-        {/* </View> */}
-
-        {/* <h2>{translated.title6}</h2> */}
-        {/* <Swipe */}
-        {/*  ref={openRef} */}
-        {/*  rightAction={ */}
-        {/*    <Button */}
-        {/*      shape="square" */}
-        {/*      type="primary" */}
-        {/*      style={{ alignSelf: 'stretch' }} */}
-        {/*    > */}
-        {/*      {translated.del} */}
-        {/*    </Button> */}
-        {/*  } */}
-        {/*  style={{ marginBottom: '10px' }} */}
-        {/* > */}
-        {/*  <Cell */}
-        {/*    title={translated.openOrClose} */}
-        {/*    radius={0} */}
-        {/*    style={{ margin: 0, alignSelf: 'stretch' }} */}
-        {/*  /> */}
-        {/* </Swipe> */}
-        {/* <div style={{ display: 'flex' }}> */}
-        {/*  <Button */}
-        {/*    style={{ marginInlineEnd: '10px', alignSelf: 'stretch' }} */}
-        {/*    type="primary" */}
-        {/*    size="small" */}
-        {/*    onClick={() => (openRef.current as any)?.open()} */}
-        {/*  > */}
-        {/*    {translated.open} */}
-        {/*  </Button> */}
-        {/*  <Button */}
-        {/*    size="small" */}
-        {/*    style={{ alignSelf: 'stretch' }} */}
-        {/*    onClick={() => (openRef.current as any)?.close()} */}
-        {/*  > */}
-        {/*    {translated.close} */}
-        {/*  </Button> */}
-        {/* </div> */}
-        {/* <h2>{translated.title7}</h2> */}
-        {/* <Swipe */}
-        {/*  ref={closeRef} */}
-        {/*  rightAction={ */}
-        {/*    <Button */}
-        {/*      shape="square" */}
-        {/*      type="primary" */}
-        {/*      style={{ alignSelf: 'stretch' }} */}
-        {/*    > */}
-        {/*      {translated.del} */}
-        {/*    </Button> */}
-        {/*  } */}
-        {/*  onActionClick={() => { */}
-        {/*    ;(closeRef.current as any)?.close() */}
-        {/*  }} */}
-        {/* > */}
-        {/*  <Cell */}
-        {/*    title={translated.closeLeft} */}
-        {/*    radius={0} */}
-        {/*    style={{ margin: 0, alignSelf: 'stretch' }} */}
-        {/*  /> */}
-        {/* </Swipe> */}
-        {/* <h2>{translated.title2}</h2> */}
-        {/* <Swipe */}
-        {/*  rightAction={ */}
-        {/*    <Button */}
-        {/*      shape="square" */}
-        {/*      type="primary" */}
-        {/*      style={{ alignSelf: 'stretch' }} */}
-        {/*    > */}
-        {/*      {translated.del} */}
-        {/*    </Button> */}
-        {/*  } */}
-        {/*  disabled */}
-        {/* > */}
-        {/*  <Cell */}
-        {/*    title={translated.disabled} */}
-        {/*    radius={0} */}
-        {/*    style={{ margin: 0, alignSelf: 'stretch' }} */}
-        {/*  /> */}
-        {/* </Swipe> */}
-        {/* <h2>{translated.title3}</h2> */}
-        {/* <Swipe */}
-        {/*  leftAction={ */}
-        {/*    <Button */}
-        {/*      shape="square" */}
-        {/*      type="primary" */}
-        {/*      style={{ alignSelf: 'stretch' }} */}
-        {/*    > */}
-        {/*      {translated.choose} */}
-        {/*    </Button> */}
-        {/*  } */}
-        {/*  rightAction={ */}
-        {/*    <> */}
-        {/*      <Button */}
-        {/*        shape="square" */}
-        {/*        type="primary" */}
-        {/*        style={{ alignSelf: 'stretch' }} */}
-        {/*      > */}
-        {/*        {translated.del} */}
-        {/*      </Button> */}
-        {/*      <Button */}
-        {/*        shape="square" */}
-        {/*        type="primary" */}
-        {/*        style={{ alignSelf: 'stretch' }} */}
-        {/*      > */}
-        {/*        {translated.collect} */}
-        {/*      </Button> */}
-        {/*    </> */}
-        {/*  } */}
-        {/*  onActionClick={handleChange} */}
-        {/*  onOpen={({ name, position }) => { */}
-        {/*    // Toast.show(translated.open) */}
-        {/*    toastShow(translated.open) */}
-        {/*  }} */}
-        {/*  onClose={handleClose} */}
-        {/* > */}
-        {/*  <Cell */}
-        {/*    title={translated.event} */}
-        {/*    style={{ margin: 0, alignSelf: 'stretch' }} */}
-        {/*  /> */}
-        {/* </Swipe> */}
-        {/* <h2>{translated.title4}</h2> */}
-        {/* <Swipe */}
-        {/*  ref={refDom} */}
-        {/*  beforeClose={beforeClose} */}
-        {/*  leftAction={ */}
-        {/*    <Button */}
-        {/*      shape="square" */}
-        {/*      type="success" */}
-        {/*      style={{ alignSelf: 'stretch' }} */}
-        {/*    > */}
-        {/*      {translated.choose} */}
-        {/*    </Button> */}
-        {/*  } */}
-        {/*  rightAction={ */}
-        {/*    <> */}
-        {/*      <Button */}
-        {/*        shape="square" */}
-        {/*        type="danger" */}
-        {/*        style={{ alignSelf: 'stretch' }} */}
-        {/*      > */}
-        {/*        {translated.del} */}
-        {/*      </Button> */}
-        {/*    </> */}
-        {/*  } */}
-        {/* > */}
-        {/*  <Cell */}
-        {/*    title={translated.event} */}
-        {/*    style={{ background: '#f0f0f0', margin: 0, alignSelf: 'stretch' }} */}
-        {/*  /> */}
-        {/* </Swipe> */}
-        {/* <h2>{translated.title5}</h2> */}
-        {/* <Swipe */}
-        {/*  rightAction={ */}
-        {/*    <> */}
-        {/*      <Button */}
-        {/*        shape="square" */}
-        {/*        type="primary" */}
-        {/*        style={{ alignSelf: 'stretch' }} */}
-        {/*      > */}
-        {/*        {translated.cart} */}
-        {/*      </Button> */}
-        {/*    </> */}
-        {/*  } */}
-        {/*  style={{ marginBottom: '30px' }} */}
-        {/* > */}
-        {/*  <Cell */}
-        {/*    style={{ */}
-        {/*      margin: 0, */}
-        {/*      alignSelf: 'stretch', */}
-        {/*    }} */}
-        {/*  > */}
-        {/*    <div */}
-        {/*      style={{ */}
-        {/*        display: 'flex', */}
-        {/*        justifyContent: 'space-between', */}
-        {/*        width: '100%', */}
-        {/*      }} */}
-        {/*    > */}
-        {/*      <span>{translated.goods}</span> */}
-        {/*      <InputNumber style={{ float: 'right' }} /> */}
-        {/*    </div> */}
-        {/*  </Cell> */}
-        {/* </Swipe> */}
-        {/* <Toast */}
-        {/*  type="text" */}
-        {/*  visible={show} */}
-        {/*  content={toastMsg} */}
-        {/*  onClose={() => { */}
-        {/*    SetShow(false) */}
-        {/*  }} */}
-        {/* /> */}
-        {/* <Dialog */}
-        {/*  visible={showDialog} */}
-        {/*  title={translated.tips} */}
-        {/*  onClose={() => { */}
-        {/*    refDom.current && refDom.current.close() */}
-        {/*    setShowDialog(false) */}
-        {/*  }} */}
-        {/* > */}
-        {/*  {pRef.current === 'left' */}
-        {/*    ? translated.chooseTips */}
-        {/*    : translated.deleteTips} */}
-        {/* </Dialog> */}
-      </div>
+      <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
+        <View className="h2">{translated.base}</View>
+        <Demo1 />
+        <View className="h2">{translated.card}</View>
+        <Demo2 />
+        <View className="h2">{translated.catchMove}</View>
+        <Demo3 />
+        <View className="h2">{translated.byRef}</View>
+        <Demo4 />
+        <View className="h2">{translated.close}</View>
+        <Demo5 />
+        <View className="h2">{translated.disabled}</View>
+        <Demo6 />
+        <View className="h2">{translated.event}</View>
+        <Demo7 />
+        <View className="h2">{translated.async}</View>
+        <Demo8 />
+        <View className="h2">{translated.custom}</View>
+        <Demo9 />
+      </ScrollView>
     </>
   )
 }
diff --git a/src/packages/swipe/demo.tsx b/src/packages/swipe/demo.tsx
index 5a50c911fd..f577f35c0f 100644
--- a/src/packages/swipe/demo.tsx
+++ b/src/packages/swipe/demo.tsx
@@ -1,396 +1,73 @@
-import React, { useRef } from 'react'
-import { Del } from '@nutui/icons-react'
-import { SwipeInstance, Swipe } from './swipe'
+import React from 'react'
 import { useTranslate } from '../../sites/assets/locale'
-import Cell from '@/packages/cell'
-import Button from '@/packages/button'
-import Toast from '@/packages/toast'
-import Dialog from '@/packages/dialog'
-import InputNumber from '@/packages/inputnumber'
-
-type TSwipeDemo = {
-  title1: string
-  title2: string
-  title3: string
-  title4: string
-  title5: string
-  title6: string
-  title8: string
-  openOrClose: string
-  title7: string
-  click: string
-  sure: string
-  del: string
-  alwaysbuy: string
-  liked: string
-  choose: string
-  event: string
-  goods: string
-  collect: string
-  open: string
-  close: string
-  closeLeft: string
-  tips: string
-  cart: string
-  leftDel: string
-  disabled: string
-  chooseTips: string
-  deleteTips: string
-}
+import Demo1 from './demos/h5/demo1'
+import Demo2 from './demos/h5/demo2'
+import Demo3 from './demos/h5/demo3'
+import Demo4 from './demos/h5/demo4'
+import Demo5 from './demos/h5/demo5'
+import Demo6 from './demos/h5/demo6'
+import Demo7 from './demos/h5/demo7'
+import Demo8 from './demos/h5/demo8'
+import Demo9 from './demos/h5/demo9'
 
 const SwipeDemo = () => {
-  const [translated] = useTranslate<TSwipeDemo>({
+  const [translated] = useTranslate({
     'zh-CN': {
-      title1: '基础用法',
-      title2: '禁用滑动',
-      title3: '事件监听',
-      title4: '非同步控制',
-      title5: '自定义內容',
-      title6: '通过实例方法控制',
-      title8: '卡片场景',
-      openOrClose: '点击下方按钮打开或关闭',
-      title7: '点击关闭',
-      click: '点击',
-      sure: '确定',
-      del: '删除',
-      alwaysbuy: '设置常购',
-      liked: '看相似',
-      choose: '选择',
-      event: '事件',
-      goods: '商品',
-      collect: '移入收藏',
-      open: '打开',
-      close: '关闭',
-      closeLeft: '点击右侧按钮关闭',
-      tips: '提示',
-      cart: '加入购物车',
-      leftDel: '左滑',
+      base: '基础用法',
+      card: '卡片场景',
+      catchMove: '阻止父元素滚动',
+      byRef: '通过实例方法控制',
+      close: '点击关闭',
       disabled: '禁用滑动',
-      chooseTips: '确定选择吗？',
-      deleteTips: '确定删除吗？',
+      event: '事件监听',
+      async: '异步控制',
+      custom: '自定义内容',
     },
     'zh-TW': {
-      title1: '基礎用法',
-      title2: '禁用滑動',
-      title3: '事件監聽',
-      title4: '非同步控制',
-      title5: '自定義內容',
-      title6: '通過實例方法控制',
-      title8: '卡片場景',
-      openOrClose: '點擊下方按鈕打開或關閉',
-      title7: '点击关闭',
-      click: '點擊',
-      sure: '確定',
-      del: '刪除',
-      alwaysbuy: '设置常购',
-      liked: '看相似',
-      choose: '選擇',
-      event: '事件',
-      goods: '商品',
-      collect: '收藏',
-      open: '打開',
-      close: '關閉',
-      closeLeft: '點擊右側按鈕關閉',
-      tips: '提示',
-      cart: '加入購物車',
-      leftDel: '左滑',
+      base: '基礎用法',
+      card: '卡片場景',
+      catchMove: '阻止父元素滾動',
+      byRef: '通過實例方法控制',
+      close: '點擊關閉',
       disabled: '禁用滑動',
-      chooseTips: '確定選擇嗎？ ',
-      deleteTips: '確定刪除嗎？ ',
+      event: '事件監聽',
+      async: '異步控制',
+      custom: '自定義內容',
     },
     'en-US': {
-      title1: 'Basic usage',
-      title2: 'Disable sliding',
-      title3: 'Event monitoring',
-      title4: 'Asynchronous control',
-      title5: 'Custom content',
-      title6: 'Control via instance method',
-      title8: 'Card mode',
-      openOrClose: 'Click the button below',
-      title7: 'Click to close',
-      click: 'click',
-      sure: 'ok',
-      del: 'delete',
-      alwaysbuy: 'always buy',
-      liked: 'liked',
-      choose: 'select',
-      event: 'event',
-      goods: 'goods',
-      collect: 'collect',
-      open: 'open',
-      close: 'close',
-      closeLeft: 'Click the right button to close',
-      tips: 'tips',
-      cart: 'add to shopping cart',
-      leftDel: 'left slide',
-      disabled: 'Disable sliding',
-      chooseTips: 'are you sure to choose?',
-      deleteTips: 'are you sure to delete?',
+      base: 'Basic Usage',
+      card: 'Card Scenario',
+      catchMove: 'Prevent Parent Element Scrolling',
+      byRef: 'Control via Instance Methods',
+      close: 'Click to Close',
+      disabled: 'Disable Sliding',
+      event: 'Event Listener',
+      async: 'Asynchronous Control',
+      custom: 'Custom Content',
     },
   })
 
-  const refDom = useRef<SwipeInstance>(null)
-  const handleChange = () => {
-    Toast.show(translated.click)
-  }
-  const beforeClose = (postion: string) => {
-    Dialog.alert({
-      title: translated.tips,
-      content:
-        postion === 'left' ? translated.chooseTips : translated.deleteTips,
-      onConfirm: () => {
-        refDom.current && refDom.current.close()
-      },
-    })
-  }
-
-  const handleClose = () => {
-    Toast.show('close')
-  }
-
-  const closeRef = useRef(null)
-  const openRef = useRef(null)
-  const divNode = (text: string, style: any, hasIcon: boolean = true) => {
-    return (
-      <div
-        style={{
-          width: '60px',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-          ...style,
-        }}
-      >
-        {hasIcon ? <Del style={{ marginBottom: '8px' }} /> : null}
-        <>{text}</>
-      </div>
-    )
-  }
   return (
     <>
-      <div className="demo">
-        <h2>{translated.title1}</h2>
-        <Swipe
-          rightAction={
-            <Button type="primary" shape="square">
-              {translated.del}
-            </Button>
-          }
-          onTouchStart={(event) => console.log('touch start', event)}
-          onTouchMove={(event) => console.log('touch Move', event)}
-          onTouchEnd={(event) => console.log('touch End', event)}
-        >
-          <Cell title={translated.leftDel} radius={0} />
-        </Swipe>
-        <h2>{translated.title8}</h2>
-        <Swipe
-          style={{ height: '104px' }}
-          rightAction={
-            <div
-              style={{
-                height: 'inherit',
-                width: '240px',
-                display: 'flex',
-                fontSize: '12px',
-              }}
-            >
-              <>
-                {divNode(translated.alwaysbuy, {
-                  background: '#F7F8FC',
-                  color: '#1A1A1A',
-                })}
-                {divNode(translated.collect, {
-                  background: '#ffcc00',
-                  color: '#FFF',
-                })}
-                {divNode(translated.liked, {
-                  background: '#FF860D',
-                  color: '#FFF',
-                })}
-                {divNode(translated.del, {
-                  background: '#FF0F23',
-                  color: '#FFF',
-                })}
-              </>
-            </div>
-          }
-        >
-          <Cell title={`${translated.leftDel}+Icon`} radius={0} />
-        </Swipe>
-        <br />
-
-        <Swipe
-          style={{ height: '104px' }}
-          rightAction={
-            <div
-              style={{
-                height: 'inherit',
-                width: '240px',
-                display: 'flex',
-                fontSize: '12px',
-              }}
-            >
-              <>
-                {divNode(
-                  translated.alwaysbuy,
-                  {
-                    background: '#F7F8FC',
-                    color: '#1A1A1A',
-                  },
-                  false
-                )}
-                {divNode(
-                  translated.collect,
-                  {
-                    background: '#ffcc00',
-                    color: '#FFF',
-                  },
-                  false
-                )}
-                {divNode(
-                  translated.liked,
-                  {
-                    background: '#FF860D',
-                    color: '#FFF',
-                  },
-                  false
-                )}
-                {divNode(
-                  translated.del,
-                  {
-                    background: '#FF0F23',
-                    color: '#FFF',
-                  },
-                  false
-                )}
-              </>
-            </div>
-          }
-        >
-          <Cell title={translated.leftDel} radius={0} />
-        </Swipe>
-        <h2>{translated.title6}</h2>
-        <Swipe
-          ref={openRef}
-          rightAction={
-            <Button shape="square" type="primary">
-              {translated.del}
-            </Button>
-          }
-          style={{ marginBottom: '10px' }}
-        >
-          <Cell title={translated.openOrClose} radius={0} />
-        </Swipe>
-        <div style={{ display: 'flex' }}>
-          <Button
-            style={{ marginInlineEnd: '10px' }}
-            type="primary"
-            size="small"
-            onClick={() => (openRef.current as any)?.open()}
-          >
-            {translated.open}
-          </Button>
-          <Button
-            size="small"
-            onClick={() => (openRef.current as any)?.close()}
-          >
-            {translated.close}
-          </Button>
-        </div>
-        <h2>{translated.title7}</h2>
-        <Swipe
-          ref={closeRef}
-          rightAction={
-            <Button shape="square" type="primary">
-              {translated.del}
-            </Button>
-          }
-          onActionClick={() => {
-            ;(closeRef.current as any)?.close()
-          }}
-        >
-          <Cell title={translated.closeLeft} radius={0} />
-        </Swipe>
-        <h2>{translated.title2}</h2>
-        <Swipe
-          rightAction={
-            <Button shape="square" type="primary">
-              {translated.del}
-            </Button>
-          }
-          disabled
-        >
-          <Cell title={translated.disabled} radius={0} />
-        </Swipe>
-        <h2>{translated.title3}</h2>
-        <Swipe
-          leftAction={
-            <Button shape="square" type="primary">
-              {translated.choose}
-            </Button>
-          }
-          rightAction={
-            <>
-              <Button shape="square" type="primary">
-                {translated.del}
-              </Button>
-              <Button shape="square" type="primary">
-                {translated.collect}
-              </Button>
-            </>
-          }
-          onActionClick={handleChange}
-          onOpen={({ name, position }) => {
-            Toast.show(translated.open)
-          }}
-          onClose={handleClose}
-        >
-          <Cell title={translated.event} radius={0} />
-        </Swipe>
-        <h2>{translated.title4}</h2>
-        <Swipe
-          ref={refDom}
-          beforeClose={beforeClose}
-          leftAction={
-            <Button shape="square" type="success">
-              {translated.choose}
-            </Button>
-          }
-          rightAction={
-            <>
-              <Button shape="square" type="danger">
-                {translated.del}
-              </Button>
-            </>
-          }
-        >
-          <Cell title={translated.event} radius={0} />
-        </Swipe>
-        <h2>{translated.title5}</h2>
-        <Swipe
-          rightAction={
-            <>
-              <Button shape="square" type="primary">
-                {translated.cart}
-              </Button>
-            </>
-          }
-          style={{ marginBottom: '30px' }}
-        >
-          <Cell>
-            <div
-              style={{
-                display: 'flex',
-                justifyContent: 'space-between',
-                width: '100%',
-              }}
-            >
-              <span>{translated.goods}</span>
-              <InputNumber style={{ float: 'right' }} />
-            </div>
-          </Cell>
-        </Swipe>
+      <div className="demo full">
+        <h2 className="h2">{translated.base}</h2>
+        <Demo1 />
+        <h2 className="h2">{translated.card}</h2>
+        <Demo2 />
+        <h2 className="h2">{translated.catchMove}</h2>
+        <Demo3 />
+        <h2 className="h2">{translated.byRef}</h2>
+        <Demo4 />
+        <h2 className="h2">{translated.close}</h2>
+        <Demo5 />
+        <h2 className="h2">{translated.disabled}</h2>
+        <Demo6 />
+        <h2 className="h2">{translated.event}</h2>
+        <Demo7 />
+        <h2 className="h2">{translated.async}</h2>
+        <Demo8 />
+        <h2 className="h2">{translated.custom}</h2>
+        <Demo9 />
       </div>
     </>
   )
diff --git a/src/packages/swipe/demos/h5/demo1.tsx b/src/packages/swipe/demos/h5/demo1.tsx
new file mode 100644
index 0000000000..97115480dd
--- /dev/null
+++ b/src/packages/swipe/demos/h5/demo1.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { Button, Cell, Swipe } from '@nutui/nutui-react'
+
+const App = () => {
+  return (
+    <>
+      <Swipe
+        rightAction={
+          <Button
+            type="primary"
+            shape="square"
+            style={{ alignSelf: 'stretch', height: 46 }}
+          >
+            删除
+          </Button>
+        }
+      >
+        <Cell
+          title="左滑删除"
+          radius={0}
+          style={{ margin: 0, alignSelf: 'stretch' }}
+        />
+      </Swipe>
+    </>
+  )
+}
+export default App
diff --git a/src/packages/swipe/demos/h5/demo2.tsx b/src/packages/swipe/demos/h5/demo2.tsx
new file mode 100644
index 0000000000..50b2f0a04d
--- /dev/null
+++ b/src/packages/swipe/demos/h5/demo2.tsx
@@ -0,0 +1,69 @@
+import React from 'react'
+import { Cell, Swipe } from '@nutui/nutui-react'
+import { Del } from '@nutui/icons-react'
+
+const ViewNode = (text: string, style: any) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        width: 60,
+        height: 104,
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        ...style,
+      }}
+    >
+      <Del style={{ marginBottom: 8 }} />
+      <>{text}</>
+    </div>
+  )
+}
+
+const App = () => {
+  return (
+    <>
+      <Swipe
+        style={{ height: 104 }}
+        rightAction={
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              width: 240,
+              height: 104,
+              fontSize: 12,
+            }}
+          >
+            <>
+              {ViewNode('设置常买', {
+                background: '#F8F8F8',
+                color: '#1A1A1A',
+              })}
+              {ViewNode('移入收藏', {
+                background: '#ffcc00',
+                color: '#FFF',
+              })}
+              {ViewNode('看相似', {
+                background: '#FF860D',
+                color: '#FFF',
+              })}
+              {ViewNode('删除', {
+                background: '#FA2C19',
+                color: '#FFF',
+              })}
+            </>
+          </div>
+        }
+      >
+        <Cell
+          title="左滑"
+          radius={0}
+          style={{ margin: 0, alignSelf: 'stretch' }}
+        />
+      </Swipe>
+    </>
+  )
+}
+export default App
diff --git a/src/packages/swipe/demos/h5/demo3.tsx b/src/packages/swipe/demos/h5/demo3.tsx
new file mode 100644
index 0000000000..656f22d57a
--- /dev/null
+++ b/src/packages/swipe/demos/h5/demo3.tsx
@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+import { Button, Cell, Swipe } from '@nutui/nutui-react'
+
+const App = () => {
+  const [shouldCatchMove, setShouldCatchMove] = useState(false)
+
+  return (
+    <>
+      <div>
+        <Swipe
+          rightAction={
+            <Button
+              type="primary"
+              shape="square"
+              style={{ alignSelf: 'stretch', height: 46 }}
+            >
+              删除
+            </Button>
+          }
+          onTouchEnd={(e) => {
+            setShouldCatchMove(false)
+          }}
+          onTouchMove={(e) => {
+            setShouldCatchMove(true)
+          }}
+        >
+          <Cell
+            title="左滑删除"
+            radius={0}
+            style={{ margin: 0, alignSelf: 'stretch' }}
+          />
+        </Swipe>
+      </div>
+    </>
+  )
+}
+export default App
diff --git a/src/packages/swipe/demos/h5/demo4.tsx b/src/packages/swipe/demos/h5/demo4.tsx
new file mode 100644
index 0000000000..7e08132865
--- /dev/null
+++ b/src/packages/swipe/demos/h5/demo4.tsx
@@ -0,0 +1,37 @@
+import React, { useRef } from 'react'
+import { Button, Cell, Swipe, SwipeInstance } from '@nutui/nutui-react'
+
+const App = () => {
+  const openRef = useRef<SwipeInstance>(null)
+  return (
+    <>
+      <Swipe
+        ref={openRef}
+        rightAction={
+          <Button
+            shape="square"
+            type="danger"
+            style={{ alignSelf: 'stretch', height: 46 }}
+          >
+            删除
+          </Button>
+        }
+      >
+        <Cell
+          title="点击下方按钮打开或关闭"
+          radius={0}
+          style={{ margin: 0, alignSelf: 'stretch' }}
+        />
+      </Swipe>
+      <Button
+        onClick={() => openRef.current?.open('right')}
+        type="primary"
+        size="small"
+      >
+        打开
+      </Button>
+      <Button onClick={() => openRef.current?.close()}>关闭</Button>
+    </>
+  )
+}
+export default App
diff --git a/src/packages/swipe/demos/h5/demo5.tsx b/src/packages/swipe/demos/h5/demo5.tsx
new file mode 100644
index 0000000000..b74ca7f3f0
--- /dev/null
+++ b/src/packages/swipe/demos/h5/demo5.tsx
@@ -0,0 +1,32 @@
+import React, { useRef } from 'react'
+import { Button, Cell, Swipe, SwipeInstance } from '@nutui/nutui-react'
+
+const App = () => {
+  const closeRef = useRef<SwipeInstance>(null)
+  return (
+    <>
+      <Swipe
+        ref={closeRef}
+        rightAction={
+          <Button
+            shape="square"
+            type="danger"
+            style={{ alignSelf: 'stretch', height: 46 }}
+          >
+            删除
+          </Button>
+        }
+        onActionClick={() => {
+          closeRef.current?.close()
+        }}
+      >
+        <Cell
+          title="点击右侧按钮关闭"
+          radius={0}
+          style={{ margin: 0, alignSelf: 'stretch' }}
+        />
+      </Swipe>
+    </>
+  )
+}
+export default App
diff --git a/src/packages/swipe/demos/h5/demo6.tsx b/src/packages/swipe/demos/h5/demo6.tsx
new file mode 100644
index 0000000000..3815adce7a
--- /dev/null
+++ b/src/packages/swipe/demos/h5/demo6.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import { Button, Cell, Swipe } from '@nutui/nutui-react'
+
+const App = () => {
+  return (
+    <>
+      <Swipe
+        rightAction={
+          <Button
+            shape="square"
+            type="danger"
+            style={{ alignSelf: 'stretch', height: 46 }}
+          >
+            删除
+          </Button>
+        }
+        disabled
+      >
+        <Cell
+          title="禁用滑动"
+          radius={0}
+          style={{ margin: 0, alignSelf: 'stretch' }}
+        />
+      </Swipe>
+    </>
+  )
+}
+export default App
diff --git a/src/packages/swipe/demos/h5/demo7.tsx b/src/packages/swipe/demos/h5/demo7.tsx
new file mode 100644
index 0000000000..8fcdb5eb11
--- /dev/null
+++ b/src/packages/swipe/demos/h5/demo7.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import { Button, Cell, Swipe, Toast } from '@nutui/nutui-react'
+
+const App = () => {
+  const handleChange = () => {
+    Toast.show({ title: 'title' })
+  }
+  return (
+    <>
+      <Swipe
+        leftAction={
+          <Button
+            shape="square"
+            type="success"
+            style={{
+              alignSelf: 'stretch',
+              height: 46,
+            }}
+          >
+            选择
+          </Button>
+        }
+        rightAction={
+          <>
+            <Button
+              shape="square"
+              type="danger"
+              style={{ alignSelf: 'stretch', height: 46 }}
+            >
+              删除
+            </Button>
+            <Button
+              shape="square"
+              type="info"
+              style={{ alignSelf: 'stretch', height: 46 }}
+            >
+              收藏
+            </Button>
+          </>
+        }
+        onActionClick={handleChange}
+        onOpen={() => Toast.show({ title: '打开' })}
+        onClose={() => Toast.show({ title: '关闭' })}
+      >
+        <Cell
+          title="事件"
+          radius={0}
+          style={{ margin: 0, alignSelf: 'stretch' }}
+        />
+      </Swipe>
+    </>
+  )
+}
+export default App
diff --git a/src/packages/swipe/demos/h5/demo8.tsx b/src/packages/swipe/demos/h5/demo8.tsx
new file mode 100644
index 0000000000..d3607333e0
--- /dev/null
+++ b/src/packages/swipe/demos/h5/demo8.tsx
@@ -0,0 +1,58 @@
+import React, { useRef, useState } from 'react'
+import { Button, Cell, Dialog, Swipe, SwipeInstance } from '@nutui/nutui-react'
+
+const App = () => {
+  const [showDialog, setShowDialog] = useState(false)
+  const refDom = useRef<SwipeInstance>(null)
+  const pRef = useRef('left')
+  const beforeClose = (postion: string) => {
+    pRef.current = postion
+    setShowDialog(true)
+  }
+
+  return (
+    <>
+      <Swipe
+        ref={refDom}
+        beforeClose={beforeClose}
+        leftAction={
+          <Button
+            shape="square"
+            type="success"
+            style={{ alignSelf: 'stretch', height: 46 }}
+          >
+            选择
+          </Button>
+        }
+        rightAction={
+          <>
+            <Button
+              shape="square"
+              type="danger"
+              style={{ alignSelf: 'stretch', height: 46 }}
+            >
+              删除
+            </Button>
+          </>
+        }
+      >
+        <Cell
+          title="事件"
+          radius={0}
+          style={{ margin: 0, alignSelf: 'stretch' }}
+        />
+      </Swipe>
+      <Dialog
+        visible={showDialog}
+        title="提示"
+        onConfirm={() => {
+          refDom.current && refDom.current.close()
+          setShowDialog(false)
+        }}
+      >
+        {pRef.current === 'left' ? '确定选择吗？' : '确定删除吗？'}
+      </Dialog>
+    </>
+  )
+}
+export default App
diff --git a/src/packages/swipe/demos/h5/demo9.tsx b/src/packages/swipe/demos/h5/demo9.tsx
new file mode 100644
index 0000000000..f35de4bd9f
--- /dev/null
+++ b/src/packages/swipe/demos/h5/demo9.tsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import { Button, Cell, InputNumber, Swipe } from '@nutui/nutui-react'
+
+const App = () => {
+  return (
+    <>
+      <Swipe
+        rightAction={
+          <>
+            <Button
+              shape="square"
+              type="danger"
+              style={{ alignSelf: 'stretch', height: 46 }}
+            >
+              加入购物车
+            </Button>
+          </>
+        }
+      >
+        <Cell radius={0} style={{ margin: 0, alignSelf: 'stretch' }}>
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              width: '100%',
+            }}
+          >
+            <span>商品</span>
+            <InputNumber />
+          </div>
+        </Cell>
+      </Swipe>
+    </>
+  )
+}
+export default App
diff --git a/src/packages/swipe/demos/taro/demo1.tsx b/src/packages/swipe/demos/taro/demo1.tsx
new file mode 100644
index 0000000000..69b85cf1d7
--- /dev/null
+++ b/src/packages/swipe/demos/taro/demo1.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import { Button, Swipe } from '@nutui/nutui-react-taro'
+import { Text, View } from '@tarojs/components'
+import pxTransform from '@/utils/px-transform'
+
+const App = () => {
+  return (
+    <>
+      <Swipe
+        rightAction={
+          <Button
+            type="primary"
+            shape="square"
+            style={{ alignSelf: 'stretch', height: pxTransform(46) }}
+          >
+            <Text style={{ fontSize: pxTransform(12), color: '#ffffff' }}>
+              删除
+            </Text>
+          </Button>
+        }
+      >
+        <View
+          style={{
+            width: '100%',
+            height: pxTransform(46),
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            position: 'relative',
+          }}
+        >
+          <View style={{ marginLeft: pxTransform(10) }}>左滑删除</View>
+        </View>
+      </Swipe>
+    </>
+  )
+}
+export default App
diff --git a/src/packages/swipe/demos/taro/demo2.tsx b/src/packages/swipe/demos/taro/demo2.tsx
new file mode 100644
index 0000000000..7686c5043d
--- /dev/null
+++ b/src/packages/swipe/demos/taro/demo2.tsx
@@ -0,0 +1,83 @@
+import React from 'react'
+import { Swipe } from '@nutui/nutui-react-taro'
+import { Text, View } from '@tarojs/components'
+import { Del } from '@nutui/icons-react-taro'
+import { harmonyAndRn } from '@/utils/platform-taro'
+import pxTransform from '@/utils/px-transform'
+
+const ViewNode = (text: string, style: any) => {
+  return (
+    <View
+      style={{
+        display: 'flex',
+        width: pxTransform(60),
+        height: pxTransform(104),
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        ...style,
+      }}
+    >
+      {!harmonyAndRn() ? (
+        <Del style={{ marginBottom: pxTransform(8) }} />
+      ) : null}
+      <Text style={{ fontSize: pxTransform(12), color: style.color }}>
+        {text}
+      </Text>
+    </View>
+  )
+}
+
+const App = () => {
+  return (
+    <>
+      <Swipe
+        style={{ height: pxTransform(104) }}
+        rightAction={
+          <View
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              width: pxTransform(240),
+              height: pxTransform(104),
+              fontSize: pxTransform(12),
+            }}
+          >
+            <>
+              {ViewNode('设置常买', {
+                backgroundColor: '#F8F8F8',
+                color: '#1A1A1A',
+              })}
+              {ViewNode('移入收藏', {
+                backgroundColor: '#ffcc00',
+                color: '#FFF',
+              })}
+              {ViewNode('看相似', {
+                backgroundColor: '#FF860D',
+                color: '#FFF',
+              })}
+              {ViewNode('删除', {
+                backgroundColor: '#FA2C19',
+                color: '#FFF',
+              })}
+            </>
+          </View>
+        }
+      >
+        <View
+          style={{
+            width: '100%',
+            height: pxTransform(46),
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            position: 'relative',
+          }}
+        >
+          <View style={{ marginLeft: pxTransform(10) }}>左滑</View>
+        </View>
+      </Swipe>
+    </>
+  )
+}
+export default App
diff --git a/src/packages/swipe/demos/taro/demo3.tsx b/src/packages/swipe/demos/taro/demo3.tsx
new file mode 100644
index 0000000000..9c52bdfaa8
--- /dev/null
+++ b/src/packages/swipe/demos/taro/demo3.tsx
@@ -0,0 +1,48 @@
+import React, { useState } from 'react'
+import { Text, View } from '@tarojs/components'
+import { Button, Swipe } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
+
+const App = () => {
+  const [shouldCatchMove, setShouldCatchMove] = useState(false)
+
+  return (
+    <>
+      <View catchMove={shouldCatchMove}>
+        <Swipe
+          rightAction={
+            <Button
+              type="primary"
+              shape="square"
+              style={{ alignSelf: 'stretch', height: pxTransform(46) }}
+            >
+              <Text style={{ fontSize: pxTransform(12), color: '#ffffff' }}>
+                删除
+              </Text>
+            </Button>
+          }
+          onTouchEnd={(e) => {
+            setShouldCatchMove(false)
+          }}
+          onTouchMove={(e) => {
+            setShouldCatchMove(true)
+          }}
+        >
+          <View
+            style={{
+              width: '100%',
+              height: pxTransform(46),
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              position: 'relative',
+            }}
+          >
+            <View style={{ marginLeft: pxTransform(10) }}>左滑删除</View>
+          </View>
+        </Swipe>
+      </View>
+    </>
+  )
+}
+export default App
diff --git a/src/packages/swipe/demos/taro/demo4.tsx b/src/packages/swipe/demos/taro/demo4.tsx
new file mode 100644
index 0000000000..0573a92df2
--- /dev/null
+++ b/src/packages/swipe/demos/taro/demo4.tsx
@@ -0,0 +1,54 @@
+import React, { useRef } from 'react'
+import { Button, Swipe, SwipeInstance } from '@nutui/nutui-react-taro'
+import { Text, View } from '@tarojs/components'
+import pxTransform from '@/utils/px-transform'
+
+const App = () => {
+  const openRef = useRef<SwipeInstance>(null)
+  return (
+    <>
+      <Swipe
+        ref={openRef}
+        rightAction={
+          <Button
+            shape="square"
+            type="danger"
+            style={{ alignSelf: 'stretch', height: pxTransform(46) }}
+          >
+            <Text style={{ fontSize: pxTransform(12), color: '#ffffff' }}>
+              删除
+            </Text>
+          </Button>
+        }
+      >
+        <View
+          style={{
+            width: '100%',
+            height: pxTransform(46),
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            position: 'relative',
+          }}
+        >
+          <View style={{ marginLeft: pxTransform(10) }}>
+            点击下方按钮打开或关闭
+          </View>
+        </View>
+      </Swipe>
+      <View style={{ display: 'flex', flexDirection: 'row' }}>
+        <Button
+          onClick={() => openRef.current?.open('right')}
+          type="primary"
+          size="small"
+        >
+          <Text style={{ color: '#ffffff' }}>打开</Text>
+        </Button>
+        <Button size="small" onClick={() => openRef.current?.close()}>
+          关闭
+        </Button>
+      </View>
+    </>
+  )
+}
+export default App
diff --git a/src/packages/swipe/demos/taro/demo5.tsx b/src/packages/swipe/demos/taro/demo5.tsx
new file mode 100644
index 0000000000..20383ee598
--- /dev/null
+++ b/src/packages/swipe/demos/taro/demo5.tsx
@@ -0,0 +1,43 @@
+import React, { useRef } from 'react'
+import { Button, Swipe, SwipeInstance } from '@nutui/nutui-react-taro'
+import { Text, View } from '@tarojs/components'
+import pxTransform from '@/utils/px-transform'
+
+const App = () => {
+  const closeRef = useRef<SwipeInstance>(null)
+  return (
+    <>
+      <Swipe
+        ref={closeRef}
+        rightAction={
+          <Button
+            shape="square"
+            type="danger"
+            style={{ alignSelf: 'stretch', height: pxTransform(46) }}
+          >
+            <Text style={{ fontSize: pxTransform(12), color: '#ffffff' }}>
+              删除
+            </Text>
+          </Button>
+        }
+        onActionClick={() => {
+          closeRef.current?.close()
+        }}
+      >
+        <View
+          style={{
+            width: '100%',
+            height: pxTransform(46),
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            position: 'relative',
+          }}
+        >
+          <View style={{ marginLeft: pxTransform(10) }}>点击右侧按钮关闭</View>
+        </View>
+      </Swipe>
+    </>
+  )
+}
+export default App
diff --git a/src/packages/swipe/demos/taro/demo6.tsx b/src/packages/swipe/demos/taro/demo6.tsx
new file mode 100644
index 0000000000..a246ffaba4
--- /dev/null
+++ b/src/packages/swipe/demos/taro/demo6.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import { Button, Swipe } from '@nutui/nutui-react-taro'
+import { View, Text } from '@tarojs/components'
+import pxTransform from '@/utils/px-transform'
+
+const App = () => {
+  return (
+    <>
+      <Swipe
+        rightAction={
+          <Button
+            shape="square"
+            type="danger"
+            style={{ alignSelf: 'stretch', height: pxTransform(46) }}
+          >
+            <Text style={{ fontSize: pxTransform(12), color: '#ffffff' }}>
+              删除
+            </Text>
+          </Button>
+        }
+        disabled
+      >
+        <View
+          style={{
+            width: '100%',
+            height: pxTransform(46),
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            position: 'relative',
+          }}
+        >
+          <View style={{ marginLeft: pxTransform(10) }}>禁用滑动</View>
+        </View>
+      </Swipe>
+    </>
+  )
+}
+export default App
diff --git a/src/packages/swipe/demos/taro/demo7.tsx b/src/packages/swipe/demos/taro/demo7.tsx
new file mode 100644
index 0000000000..14b4ea23b5
--- /dev/null
+++ b/src/packages/swipe/demos/taro/demo7.tsx
@@ -0,0 +1,71 @@
+import React from 'react'
+import Taro from '@tarojs/taro'
+import { Button, Swipe } from '@nutui/nutui-react-taro'
+import { Text, View } from '@tarojs/components'
+import pxTransform from '@/utils/px-transform'
+
+const App = () => {
+  const handleChange = () => {
+    Taro.showToast({ title: 'title' })
+  }
+  return (
+    <>
+      <Swipe
+        leftAction={
+          <Button
+            shape="square"
+            type="success"
+            style={{
+              alignSelf: 'stretch',
+              height: pxTransform(46),
+            }}
+          >
+            <Text style={{ fontSize: pxTransform(12), color: '#ffffff' }}>
+              选择
+            </Text>
+          </Button>
+        }
+        rightAction={
+          <>
+            <Button
+              shape="square"
+              type="danger"
+              style={{ alignSelf: 'stretch', height: pxTransform(46) }}
+            >
+              <Text style={{ fontSize: pxTransform(12), color: '#ffffff' }}>
+                删除
+              </Text>
+            </Button>
+            <Button
+              shape="square"
+              type="info"
+              style={{ alignSelf: 'stretch', height: pxTransform(46) }}
+            >
+              <Text style={{ fontSize: pxTransform(12), color: '#ffffff' }}>
+                收藏
+              </Text>
+            </Button>
+          </>
+        }
+        onActionClick={handleChange}
+        onOpen={() => Taro.showToast({ title: '打开' })}
+        onClose={() => Taro.showToast({ title: '关闭' })}
+      >
+        <View
+          style={{
+            width: '100%',
+            height: pxTransform(46),
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            position: 'relative',
+            zIndex: 2,
+          }}
+        >
+          <View style={{ marginLeft: pxTransform(10) }}>事件</View>
+        </View>
+      </Swipe>
+    </>
+  )
+}
+export default App
diff --git a/src/packages/swipe/demos/taro/demo8.tsx b/src/packages/swipe/demos/taro/demo8.tsx
new file mode 100644
index 0000000000..27ecc2f0ee
--- /dev/null
+++ b/src/packages/swipe/demos/taro/demo8.tsx
@@ -0,0 +1,72 @@
+import React, { useRef, useState } from 'react'
+import { Button, Swipe, SwipeInstance } from '@nutui/nutui-react-taro'
+import { Text, View } from '@tarojs/components'
+import pxTransform from '@/utils/px-transform'
+
+const App = () => {
+  const [showDialog, setShowDialog] = useState(false)
+  const refDom = useRef<SwipeInstance>(null)
+  const pRef = useRef('left')
+  const beforeClose = (postion: string) => {
+    pRef.current = postion
+    setShowDialog(true)
+  }
+
+  return (
+    <>
+      <Swipe
+        ref={refDom}
+        beforeClose={beforeClose}
+        leftAction={
+          <Button
+            shape="square"
+            type="success"
+            style={{ alignSelf: 'stretch', height: pxTransform(46) }}
+          >
+            <Text style={{ fontSize: pxTransform(12), color: '#ffffff' }}>
+              选择
+            </Text>
+          </Button>
+        }
+        rightAction={
+          <>
+            <Button
+              shape="square"
+              type="danger"
+              style={{ alignSelf: 'stretch', height: pxTransform(46) }}
+            >
+              <Text style={{ fontSize: pxTransform(12), color: '#ffffff' }}>
+                删除
+              </Text>
+            </Button>
+          </>
+        }
+      >
+        <View
+          style={{
+            width: '100%',
+            height: pxTransform(46),
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            position: 'relative',
+            zIndex: 2,
+          }}
+        >
+          <View style={{ marginLeft: pxTransform(10) }}>事件</View>
+        </View>
+      </Swipe>
+      {/* <Dialog */}
+      {/*  visible={showDialog} */}
+      {/*  title="提示" */}
+      {/*  onConfirm={() => { */}
+      {/*    refDom.current && refDom.current.close() */}
+      {/*    setShowDialog(false) */}
+      {/*  }} */}
+      {/* > */}
+      {/*  {pRef.current === 'left' ? '确定选择吗？' : '确定删除吗？'} */}
+      {/* </Dialog> */}
+    </>
+  )
+}
+export default App
diff --git a/src/packages/swipe/demos/taro/demo9.tsx b/src/packages/swipe/demos/taro/demo9.tsx
new file mode 100644
index 0000000000..402048b810
--- /dev/null
+++ b/src/packages/swipe/demos/taro/demo9.tsx
@@ -0,0 +1,52 @@
+import React from 'react'
+import { Button, InputNumber, Swipe } from '@nutui/nutui-react-taro'
+import { Text, View } from '@tarojs/components'
+import pxTransform from '../../../../utils/px-transform'
+import { harmonyAndRn } from '@/utils/platform-taro'
+
+const App = () => {
+  return (
+    <>
+      <Swipe
+        rightAction={
+          <>
+            <Button
+              shape="square"
+              type="danger"
+              style={{ alignSelf: 'stretch', height: pxTransform(46) }}
+            >
+              <Text style={{ fontSize: pxTransform(12), color: '#ffffff' }}>
+                加入购物车
+              </Text>
+            </Button>
+          </>
+        }
+      >
+        <View
+          style={{
+            width: '100%',
+            height: pxTransform(46),
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            position: 'relative',
+          }}
+        >
+          <View style={{ marginLeft: pxTransform(10) }}>
+            <View
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                width: '100%',
+              }}
+            >
+              <Text>商品</Text>
+              {!harmonyAndRn() ? <InputNumber /> : null}
+            </View>
+          </View>
+        </View>
+      </Swipe>
+    </>
+  )
+}
+export default App
diff --git a/src/packages/swipe/swipe.harmony.css b/src/packages/swipe/swipe.harmony.css
index c28290367d..979aa52191 100644
--- a/src/packages/swipe/swipe.harmony.css
+++ b/src/packages/swipe/swipe.harmony.css
@@ -1,78 +1,29 @@
-.test-swipe {
-  display: flex;
-  flex-direction: row;
-  background: #00abcc;
-}
-
-.test-swipe-wrap {
+.nut-swipe {
   display: flex;
   flex-direction: row;
   position: relative;
-  background: #1A1A1A;
+  overflow: hidden;
+  cursor: grab;
+  background-color: #ffffff;
 }
-
-.test-swipe-left {
+.nut-swipe-wrapper {
   display: flex;
   flex-direction: row;
+  justify-content: flex-start;
   align-self: stretch;
-  position: absolute;
-  background: #00bc14;
-  height: 100%;
+  width: 100%;
+  transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1);
+  transition-property: transform;
 }
-
-.test-swipe-left-c {
-  font-size: 14px;
-}
-
-.test-swipe-content {
-  font-size: 14px;
-  padding: 14px;
+.nut-swipe-left, .nut-swipe-right {
+  position: absolute;
+  top: 0;
+  display: flex;
+  flex-direction: row;
 }
-
-.test-height {
-  height: 1000px;
+.nut-swipe-left {
+  left: 0;
 }
-
-/*.nut-swipe {*/
-/*  display: flex;*/
-/*  flex-direction: row;*/
-/*  overflow: hidden;*/
-/*  cursor: grab;*/
-/*  background-color: #ffffff;*/
-/*}*/
-
-/*.nut-swipe-wrapper {*/
-/*  display: flex;*/
-/*  flex-direction: row;*/
-/*  justify-content: flex-start;*/
-/*  position: relative;*/
-/*  background: green;*/
-/*  transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1);*/
-/*  transition-property: transform;*/
-/*}*/
-
-/*.nut-swipe-wrapper .nut-button {*/
-/*  align-self: stretch;*/
-/*}*/
-
-/*.nut-swipe-wrapper .nut-cell {*/
-/*  margin: 0;*/
-/*  align-self: stretch;*/
-/*}*/
-
-/*.nut-swipe-left, .nut-swipe-right {*/
-/*  display: flex;*/
-/*  flex-direction: row;*/
-/*  align-self: stretch;*/
-/*}*/
-
-/*.nut-swipe-left {*/
-/*  display: block;*/
-/*  position: absolute;*/
-/*  left: 0;*/
-/*  transform: translate(-100%, 0);*/
-/*}*/
-
-/*.nut-swipe-right {*/
-/*  left: 100%;*/
-/*}*/
\ No newline at end of file
+.nut-swipe-right {
+  left: 100%;
+}
\ No newline at end of file
diff --git a/src/packages/swipe/swipe.scss b/src/packages/swipe/swipe.scss
index 58d7d3ce3b..dcc54964f4 100644
--- a/src/packages/swipe/swipe.scss
+++ b/src/packages/swipe/swipe.scss
@@ -1,40 +1,34 @@
 .nut-swipe {
+  display: flex;
+  flex-direction: row;
   position: relative;
   overflow: hidden;
   cursor: grab;
   background-color: $white;
 
   &-wrapper {
-    height: inherit;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-self: stretch;
+    width: 100%;
     transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1);
     transition-property: transform;
-
-    .nut-button {
-      height: 100%;
-    }
-
-    .nut-cell {
-      margin: 0;
-      height: 100%;
-    }
   }
 
   &-left,
   &-right {
-    display: flex;
     position: absolute;
     top: 0;
-    height: 100%;
-    align-items: stretch;
+    display: flex;
+    flex-direction: row;
   }
 
   &-left {
     left: 0;
-    transform: translate3d(-100%, 0, 0);
   }
 
   &-right {
-    right: 0;
-    transform: translate3d(101%, 0, 0);
+    left: 100%;
   }
 }
diff --git a/src/packages/swipe/swipe.taro.tsx b/src/packages/swipe/swipe.taro.tsx
index 2d1b47a6c7..f1579c2c88 100644
--- a/src/packages/swipe/swipe.taro.tsx
+++ b/src/packages/swipe/swipe.taro.tsx
@@ -1,18 +1,20 @@
 import React, {
-  useRef,
   forwardRef,
-  useState,
-  useImperativeHandle,
+  MouseEvent,
   useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
 } from 'react'
-import type { MouseEvent } from 'react'
 import classNames from 'classnames'
-import { View, ITouchEvent } from '@tarojs/components'
-import { nextTick, useReady } from '@tarojs/taro'
+import { ITouchEvent, View } from '@tarojs/components'
 import { BaseEventOrig } from '@tarojs/components/types/common'
 import { useTouch } from '@/utils/use-touch'
 import { getRectByTaro } from '@/utils/get-rect-by-taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import { harmony, harmonyAndRn } from '@/utils/platform-taro'
+import pxTransform from '@/utils/px-transform'
+import { useRefState } from '@/utils/use-ref-state'
 
 export type SwipeSide = 'left' | 'right'
 
@@ -76,7 +78,7 @@ export const Swipe = forwardRef<
   const touch: any = useTouch()
 
   // 获取元素的时候要在页面 onReady 后，需要参考小程序的事件周期
-  useReady(() => {
+  useEffect(() => {
     const getWidth = async () => {
       if (leftWrapper.current) {
         const leftRect = await getRectByTaro(leftWrapper.current)
@@ -84,13 +86,13 @@ export const Swipe = forwardRef<
       }
       if (rightWrapper.current) {
         const rightRect = await getRectByTaro(rightWrapper.current)
-        console.log('rightRect', rightRect.width)
+        console.log('actionWidth.current.left', rightRect.width)
         rightRect &&
           setActionWidth((v: any) => ({ ...v, right: rightRect.width }))
       }
     }
-    nextTick(() => getWidth())
-  })
+    setTimeout(() => getWidth())
+  }, [])
 
   const { children, className, style } = { ...defaultProps, ...props }
 
@@ -104,17 +106,23 @@ export const Swipe = forwardRef<
     dragging: false,
   })
 
-  const actionWidth = useRef({
+  const [actionWidth, updateState] = useRefState({
     left: 0,
     right: 0,
   })
   const setActionWidth = (fn: any) => {
     const res = fn()
     if (res.left !== undefined) {
-      actionWidth.current.left = res.left
+      updateState({
+        ...actionWidth.current,
+        left: res.left,
+      })
     }
     if (res.right !== undefined) {
-      actionWidth.current.right = res.right
+      updateState({
+        ...actionWidth.current,
+        right: res.right,
+      })
     }
   }
   const wrapperStyle = {
@@ -123,18 +131,13 @@ export const Swipe = forwardRef<
   }
 
   const onTouchStart = async (event: BaseEventOrig<HTMLDivElement>) => {
+    console.log('ontouchstart')
     if (leftWrapper.current) {
       const leftRect = await getRectByTaro(leftWrapper.current)
-      console.log('leftWrapper.current', leftRect.width)
       leftRect && setActionWidth((v: any) => ({ ...v, left: leftRect.width }))
     }
     if (rightWrapper.current) {
       const rightRect = await getRectByTaro(rightWrapper.current)
-      console.log(
-        'rightRect.current ontouchstart',
-        rightRect.width,
-        JSON.stringify(rightRect)
-      )
       rightRect &&
         setActionWidth((v: any) => ({ ...v, right: rightRect.width }))
     }
@@ -152,27 +155,21 @@ export const Swipe = forwardRef<
 
     touch.move(event)
     props.onTouchMove?.(event)
-
     if (touch.isHorizontal()) {
       lockClick.current = true
-      props.onTouchMove && props.onTouchMove(event)
       const newState = { ...state, dragging: true }
       const isEdge = !opened || touch.deltaX.current * startOffset.current < 0
       if (isEdge) {
         preventDefault(event, true)
       }
+
       newState.offset = rangeCalculation(
-        touch.deltaX.current + startOffset.current,
+        (harmony()
+          ? parseFloat(pxTransform(touch.deltaX.current))
+          : touch.deltaX.current) + startOffset.current,
         -actionWidth.current.right || 0,
         actionWidth.current.left || 0
       )
-      console.log(
-        'rightRect.current swipe.event',
-        touch.deltaX.current + startOffset.current,
-        actionWidth.current.right,
-        actionWidth.current.left
-      )
-
       setState(newState)
     }
   }
@@ -194,7 +191,6 @@ export const Swipe = forwardRef<
     const baseNum = opened ? 1 - base : base
     const width =
       side === 'left' ? actionWidth.current.left : actionWidth.current.right
-
     if (width && offset > Number(width) * baseNum) {
       open(side)
     } else {
@@ -233,10 +229,16 @@ export const Swipe = forwardRef<
   const rightWrapper = useRef(null)
   const renderActionContent = (side: SwipeSide) => {
     if (props[`${side}Action`]) {
+      console.log('actionWidth xxx', actionWidth.current.left)
       return (
         <View
           ref={side === 'left' ? leftWrapper : rightWrapper}
           className={`${classPrefix}-${side}`}
+          style={{
+            ...(side === 'left'
+              ? { left: Number(`${-actionWidth.current.left}`) }
+              : {}),
+          }}
           onClick={(e) => handleOperate(e, side)}
         >
           {props[`${side}Action`]}
@@ -263,6 +265,8 @@ export const Swipe = forwardRef<
   }))
 
   useEffect(() => {
+    if (harmonyAndRn()) return
+
     const handler: any = (event: { target: Node | null }) => {
       const targets = [root]
       if (
diff --git a/src/utils/use-touch.ts b/src/utils/use-touch.ts
index a43b6a6314..8653eea888 100644
--- a/src/utils/use-touch.ts
+++ b/src/utils/use-touch.ts
@@ -41,23 +41,44 @@ export function useTouch() {
     last.current = false
   }
 
+  const getTouch = (event: React.TouchEvent<HTMLElement>) => {
+    const touch = event.touches ? event.touches[0] : event.nativeEvent
+    return touch as React.Touch
+  }
+
   const getX = (touch: React.Touch) => {
-    return touch.screenX || touch.clientX
+    if (
+      typeof touch.clientX !== 'undefined' &&
+      typeof touch.pageX !== 'undefined'
+    )
+      return touch.pageX
+    if (typeof touch.clientX !== 'undefined') return touch.clientX
+    if (typeof touch.pageX !== 'undefined') return touch.pageX
+    if (typeof touch.screenX !== 'undefined') return touch.screenX
+    return 0
   }
 
   const getY = (touch: React.Touch) => {
-    return touch.screenY || touch.clientY
+    if (
+      typeof touch.clientY !== 'undefined' &&
+      typeof touch.pageY !== 'undefined'
+    )
+      return touch.pageY
+    if (typeof touch.clientY !== 'undefined') return touch.clientY
+    if (typeof touch.pageY !== 'undefined') return touch.pageY
+    if (typeof touch.screenY !== 'undefined') return touch.screenY
+    return 0
   }
 
   const start = (event: React.TouchEvent<HTMLElement>) => {
     reset()
     touchTime.current = Date.now()
-    startX.current = getX(event.touches[0])
-    startY.current = getY(event.touches[0])
+    startX.current = getX(getTouch(event))
+    startY.current = getY(getTouch(event))
   }
 
   const move = (event: React.TouchEvent<HTMLElement>) => {
-    const touch = event.touches[0]
+    const touch = getTouch(event)
     const clientX = getX(touch)
     const clientY = getY(touch)
     // Fix: Safari back will set clientX to negative number