From 69a966b41b881993f5403859d2e8a66008abd026 Mon Sep 17 00:00:00 2001 From: oasis-cloud Date: Wed, 5 Jun 2024 15:53:12 +0800 Subject: [PATCH 01/10] chore(swipe): test --- packages/nutui-harmony/build-profile.json5 | 48 +++++----- .../scripts/taro/adapted.js | 2 +- .../src/feedback/pages/swipe/index.config.ts | 2 +- .../src/feedback/pages/swipe/index.tsx | 3 +- src/packages/swipe/demo.taro.tsx | 55 ++++-------- src/packages/swipe/swipe.harmony.css | 89 ++++++------------- src/packages/swipe/swipe.scss | 62 +++++++------ 7 files changed, 106 insertions(+), 155 deletions(-) diff --git a/packages/nutui-harmony/build-profile.json5 b/packages/nutui-harmony/build-profile.json5 index 6573dfaef6..2327375a1c 100644 --- a/packages/nutui-harmony/build-profile.json5 +++ b/packages/nutui-harmony/build-profile.json5 @@ -1,33 +1,35 @@ { - app: { - signingConfigs: [], - products: [ + "app": { + "signingConfigs": [], + "products": [ { - name: 'default', - signingConfig: 'default', - compatibleSdkVersion: '4.1.0(11)', - runtimeOS: 'HarmonyOS', - }, + "name": "default", + "signingConfig": "default", + "compatibleSdkVersion": "4.1.0(11)", + "runtimeOS": "HarmonyOS" + } ], - buildModeSet: [ + "buildModeSet": [ { - name: 'debug', + "name": "debug" }, { - name: 'release', - }, - ], + "name": "release" + } + ] }, - modules: [ + "modules": [ { - name: 'default', - srcPath: './entry', - targets: [ + "name": "default", + "srcPath": "./entry", + "targets": [ { - name: 'default', - applyToProducts: ['default'], - }, - ], - }, - ], + "name": "default", + "applyToProducts": [ + "default" + ] + } + ] + } + ] } diff --git a/packages/nutui-taro-demo-rn/scripts/taro/adapted.js b/packages/nutui-taro-demo-rn/scripts/taro/adapted.js index 34f84f6907..c1be4da00c 100644 --- a/packages/nutui-taro-demo-rn/scripts/taro/adapted.js +++ b/packages/nutui-taro-demo-rn/scripts/taro/adapted.js @@ -1 +1 @@ -exports = module.exports = ["cell", "cellgroup", "overlay", "button", "switch", "countdown", "empty", "price", "tag", "layout", "row", "col", "space", "grid", "griditem", "divider", "image", "resultpage", "notify"]; \ No newline at end of file +exports = module.exports = ["cell","cellgroup","overlay","button","switch","countdown","empty","price","tag","layout","row","col","space","grid","griditem","divider","image","resultpage","notify","swipe"]; \ 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..792f402bf9 100644 --- a/src/packages/swipe/demo.taro.tsx +++ b/src/packages/swipe/demo.taro.tsx @@ -1,17 +1,10 @@ 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 { ScrollView, Text, View } from '@tarojs/components' +// import { Del } from '@nutui/icons-react-taro' import { useTranslate } from '@/sites/assets/locale/taro' import Header from '@/sites/components/header' +import Demo1 from './demos/taro/demo1' type TSwipeDemo = { title1: string @@ -178,7 +171,7 @@ const SwipeDemo = () => { ...style, }} > - {hasIcon ? : null} + {/* {hasIcon ? : null} */} { return ( <>
-
-

{translated.title1}

- - {translated.del} - - } - > - - + + {translated.title1} + - {/*

{translated.title9}

*/} + {/* {translated.title9} */} {/* { {/* /> */} {/* */} - {/*

{translated.title8}

*/} + {/* {translated.title8} */} {/* */} {/* { {/* */} {/* */} - {/*

{translated.title6}

*/} + {/* {translated.title6} */} {/* { {/* {translated.close} */} {/* */} {/*
*/} - {/*

{translated.title7}

*/} + {/* {translated.title7} */} {/* { {/* style={{ margin: 0, alignSelf: 'stretch' }} */} {/* /> */} {/* */} - {/*

{translated.title2}

*/} + {/* {translated.title2} */} {/* { {/* style={{ margin: 0, alignSelf: 'stretch' }} */} {/* /> */} {/* */} - {/*

{translated.title3}

*/} + {/* {translated.title3} */} {/* { {/* style={{ margin: 0, alignSelf: 'stretch' }} */} {/* /> */} {/* */} - {/*

{translated.title4}

*/} + {/* {translated.title4} */} {/* { {/* style={{ background: '#f0f0f0', margin: 0, alignSelf: 'stretch' }} */} {/* /> */} {/* */} - {/*

{translated.title5}

*/} + {/* {translated.title5} */} {/* */} @@ -548,7 +525,7 @@ const SwipeDemo = () => { {/* ? translated.chooseTips */} {/* : translated.deleteTips} */} {/* */} - + ) } diff --git a/src/packages/swipe/swipe.harmony.css b/src/packages/swipe/swipe.harmony.css index c28290367d..8edc8774bf 100644 --- a/src/packages/swipe/swipe.harmony.css +++ b/src/packages/swipe/swipe.harmony.css @@ -1,78 +1,45 @@ -.test-swipe { +.nut-swipe { display: flex; + position: relative; flex-direction: row; - background: #00abcc; + cursor: grab; + background-color: #ffffff; + overflow: hidden; } -.test-swipe-wrap { +.nut-swipe-wrapper { display: flex; flex-direction: row; - position: relative; - background: #1A1A1A; + justify-content: flex-start; + transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1); + transition-property: transform; + background: #00bc14; } -.test-swipe-left { - display: flex; - flex-direction: row; +.nut-swipe-wrapper .nut-button { align-self: stretch; - position: absolute; - background: #00bc14; - height: 100%; } -.test-swipe-left-c { - font-size: 14px; +.nut-swipe-wrapper .nut-cell { + margin: 0; + align-self: stretch; } -.test-swipe-content { - font-size: 14px; - padding: 14px; +.nut-swipe-left, .nut-swipe-right { + display: flex; + position: absolute; + top: 0; + height: 100%; + flex-direction: row; + align-self: stretch; + align-items: stretch; } -.test-height { - height: 1000px; +.nut-swipe-left { + left: 0; + transform: translate(-100%, 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..83b39a43ad 100644 --- a/src/packages/swipe/swipe.scss +++ b/src/packages/swipe/swipe.scss @@ -1,40 +1,44 @@ .nut-swipe { position: relative; - overflow: hidden; cursor: grab; background-color: $white; + overflow: hidden; +} - &-wrapper { - height: inherit; - transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1); - transition-property: transform; +.nut-swipe-wrapper { + display: flex; + flex-direction: row; + justify-content: flex-start; + transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1); + transition-property: transform; + background: #00bc14; +} - .nut-button { - height: 100%; - } +.nut-swipe-wrapper .nut-button { + align-self: stretch; +} - .nut-cell { - margin: 0; - height: 100%; - } - } +.nut-swipe-wrapper .nut-cell { + margin: 0; + align-self: stretch; +} - &-left, - &-right { - display: flex; - position: absolute; - top: 0; - height: 100%; - align-items: stretch; - } +.nut-swipe-left, +.nut-swipe-right { + display: flex; + position: absolute; + top: 0; + height: 100%; + flex-direction: row; + align-self: stretch; + align-items: stretch; +} - &-left { - left: 0; - transform: translate3d(-100%, 0, 0); - } +.nut-swipe-left { + left: 0; + transform: translate(-100%, 0); +} - &-right { - right: 0; - transform: translate3d(101%, 0, 0); - } +.nut-swipe-right { + left: 100%; } From 48c0107605bc697eb6806e847319f3e1e6924b65 Mon Sep 17 00:00:00 2001 From: oasis-cloud Date: Wed, 5 Jun 2024 19:59:03 +0800 Subject: [PATCH 02/10] chore(swipe): test --- src/packages/swipe/demo.taro.tsx | 227 ++++++------------------ src/packages/swipe/demos/taro/demo1.tsx | 27 +++ src/packages/swipe/demos/taro/demo2.tsx | 69 +++++++ src/packages/swipe/demos/taro/demo3.tsx | 30 ++++ src/packages/swipe/demos/taro/demo4.tsx | 29 +++ src/packages/swipe/demos/taro/demo5.tsx | 24 +++ src/packages/swipe/demos/taro/demo6.tsx | 20 +++ src/packages/swipe/demos/taro/demo7.tsx | 36 ++++ src/packages/swipe/demos/taro/demo8.tsx | 47 +++++ src/packages/swipe/demos/taro/demo9.tsx | 33 ++++ src/packages/swipe/swipe.harmony.css | 27 +-- src/packages/swipe/swipe.scss | 66 ++++--- src/packages/swipe/swipe.taro.tsx | 63 +++---- 13 files changed, 440 insertions(+), 258 deletions(-) create mode 100644 src/packages/swipe/demos/taro/demo1.tsx create mode 100644 src/packages/swipe/demos/taro/demo2.tsx create mode 100644 src/packages/swipe/demos/taro/demo3.tsx create mode 100644 src/packages/swipe/demos/taro/demo4.tsx create mode 100644 src/packages/swipe/demos/taro/demo5.tsx create mode 100644 src/packages/swipe/demos/taro/demo6.tsx create mode 100644 src/packages/swipe/demos/taro/demo7.tsx create mode 100644 src/packages/swipe/demos/taro/demo8.tsx create mode 100644 src/packages/swipe/demos/taro/demo9.tsx diff --git a/src/packages/swipe/demo.taro.tsx b/src/packages/swipe/demo.taro.tsx index 792f402bf9..7534e9092a 100644 --- a/src/packages/swipe/demo.taro.tsx +++ b/src/packages/swipe/demo.taro.tsx @@ -1,197 +1,78 @@ -import React, { useRef, useState } from 'react' -import Taro, { pxTransform } from '@tarojs/taro' -import { ScrollView, Text, View } from '@tarojs/components' +import React from 'react' +import Taro from '@tarojs/taro' +import { ScrollView, View } from '@tarojs/components' // import { Del } from '@nutui/icons-react-taro' import { useTranslate } from '@/sites/assets/locale/taro' import Header from '@/sites/components/header' import Demo1 from './demos/taro/demo1' - -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 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({ + 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(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 ( -
- {/* {hasIcon ? : null} */} - - {text} - -
- ) - } return ( <>
- {translated.title1} + {translated.base} - - + {translated.card} + + {translated.catchMove} + + {translated.byRef} + + {translated.close} + + {translated.disabled} + + {translated.event} + + {translated.async} + + {/* {translated.custom} */} + {/* */} {/* {translated.title9} */} {/* { + return ( + <> + + 删除 + + } + > + + + + ) +} +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..7521ebcb7c --- /dev/null +++ b/src/packages/swipe/demos/taro/demo2.tsx @@ -0,0 +1,69 @@ +import React from 'react' +import { Swipe, Cell } from '@nutui/nutui-react-taro' +import { View } from '@tarojs/components' +// import { Del } from '@nutui/icons-react-taro' + +const ViewNode = (text: string, style: any) => { + return ( + + {/* */} + <>{text} + + ) +} + +const App = () => { + return ( + <> + + <> + {ViewNode('设置常买', { + background: '#F8F8F8', + color: '#1A1A1A', + })} + {ViewNode('移入收藏', { + background: '#ffcc00', + color: '#FFF', + })} + {ViewNode('看相似', { + background: '#FF860D', + color: '#FFF', + })} + {ViewNode('删除', { + background: '#FA2C19', + color: '#FFF', + })} + + + } + > + + + + ) +} +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..6138165b3a --- /dev/null +++ b/src/packages/swipe/demos/taro/demo3.tsx @@ -0,0 +1,30 @@ +import React, { useState } from 'react' +import { View } from '@tarojs/components' +import { Button, Cell, Swipe } from '@nutui/nutui-react-taro' + +const App = () => { + const [shouldCatchMove, setShouldCatchMove] = useState(false) + + return ( + <> + + + 删除 + + } + onTouchEnd={(e) => { + setShouldCatchMove(false) + }} + onTouchMove={(e) => { + setShouldCatchMove(true) + }} + > + + + + + ) +} +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..4c08f0896e --- /dev/null +++ b/src/packages/swipe/demos/taro/demo4.tsx @@ -0,0 +1,29 @@ +import React, { useRef } from 'react' +import { Button, Cell, Swipe } from '@nutui/nutui-react-taro' + +const App = () => { + const openRef = useRef(null) + return ( + <> + + 删除 + + } + > + + + + + + ) +} +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..0fdec799a8 --- /dev/null +++ b/src/packages/swipe/demos/taro/demo5.tsx @@ -0,0 +1,24 @@ +import React, { useRef } from 'react' +import { Swipe, Cell, Button } from '@nutui/nutui-react-taro' + +const App = () => { + const closeRef = useRef(null) + return ( + <> + + 删除 + + } + onActionClick={() => { + closeRef.current.close() + }} + > + + + + ) +} +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..9b8444da8b --- /dev/null +++ b/src/packages/swipe/demos/taro/demo6.tsx @@ -0,0 +1,20 @@ +import React from 'react' +import { Swipe, Cell, Button } from '@nutui/nutui-react-taro' + +const App = () => { + return ( + <> + + 删除 + + } + disabled + > + + + + ) +} +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..ed9800504c --- /dev/null +++ b/src/packages/swipe/demos/taro/demo7.tsx @@ -0,0 +1,36 @@ +import React from 'react' +import Taro from '@tarojs/taro' +import { Button, Cell, Swipe } from '@nutui/nutui-react-taro' + +const App = () => { + const handleChange = () => { + Taro.showToast({ title: 'title' }) + } + return ( + <> + + 选择 + + } + rightAction={ + <> + + + + } + onActionClick={handleChange} + onOpen={() => Taro.showToast({ title: '打开' })} + onClose={() => Taro.showToast({ title: '关闭' })} + > + + + + ) +} +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..46295b53e6 --- /dev/null +++ b/src/packages/swipe/demos/taro/demo8.tsx @@ -0,0 +1,47 @@ +import React, { useRef, useState } from 'react' +import { Button, Cell, Dialog, Swipe } from '@nutui/nutui-react-taro' +import { SwipeInstance } from '@/packages/Swipe' + +const App = () => { + const [showDialog, setShowDialog] = useState(false) + const refDom = useRef(null) + const pRef = useRef('left') + const beforeClose = (postion: string) => { + pRef.current = postion + setShowDialog(true) + } + + return ( + <> + + 选择 + + } + rightAction={ + <> + + + } + > + + + { + refDom.current && refDom.current.close() + setShowDialog(false) + }} + > + {pRef.current === 'left' ? '确定选择吗？' : '确定删除吗？'} + + + ) +} +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..62517ef42e --- /dev/null +++ b/src/packages/swipe/demos/taro/demo9.tsx @@ -0,0 +1,33 @@ +import React from 'react' +import { Swipe, Cell, Button, InputNumber } from '@nutui/nutui-react-taro' +import { View } from '@tarojs/components' + +const App = () => { + return ( + <> + + + + } + > + + + 商品 + + + + + + ) +} +export default App diff --git a/src/packages/swipe/swipe.harmony.css b/src/packages/swipe/swipe.harmony.css index 8edc8774bf..48883cf24c 100644 --- a/src/packages/swipe/swipe.harmony.css +++ b/src/packages/swipe/swipe.harmony.css @@ -1,45 +1,32 @@ .nut-swipe { display: flex; - position: relative; flex-direction: row; + position: relative; + overflow: hidden; cursor: grab; background-color: #ffffff; - overflow: hidden; } - .nut-swipe-wrapper { display: flex; flex-direction: row; justify-content: flex-start; + align-self: stretch; + width: 100%; + background: green; transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1); transition-property: transform; - background: #00bc14; } - -.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; position: absolute; top: 0; - height: 100%; + display: flex; flex-direction: row; align-self: stretch; align-items: stretch; } - .nut-swipe-left { left: 0; - transform: translate(-100%, 0); } - .nut-swipe-right { - left: 100%; + right: 0; } \ No newline at end of file diff --git a/src/packages/swipe/swipe.scss b/src/packages/swipe/swipe.scss index 83b39a43ad..0f0e5881b0 100644 --- a/src/packages/swipe/swipe.scss +++ b/src/packages/swipe/swipe.scss @@ -1,44 +1,40 @@ .nut-swipe { + display: flex; + flex-direction: row; position: relative; + overflow: hidden; cursor: grab; background-color: $white; - overflow: hidden; -} - -.nut-swipe-wrapper { - display: flex; - flex-direction: row; - justify-content: flex-start; - transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1); - transition-property: transform; - background: #00bc14; -} - -.nut-swipe-wrapper .nut-button { - align-self: stretch; -} -.nut-swipe-wrapper .nut-cell { - margin: 0; - align-self: stretch; -} + &-wrapper { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-self: stretch; + width: 100%; + background: green; + transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1); + transition-property: transform; + } -.nut-swipe-left, -.nut-swipe-right { - display: flex; - position: absolute; - top: 0; - height: 100%; - flex-direction: row; - align-self: stretch; - align-items: stretch; -} + &-left, + &-right { + position: absolute; + top: 0; + display: flex; + flex-direction: row; + align-self: stretch; + align-items: stretch; + } -.nut-swipe-left { - left: 0; - transform: translate(-100%, 0); -} + &-left { + left: 0; + //transform: translate(-100%, 0); + } -.nut-swipe-right { - left: 100%; + &-right { + right: 0; + //left: 100%; + //transform: translate(101%, 0); + } } diff --git a/src/packages/swipe/swipe.taro.tsx b/src/packages/swipe/swipe.taro.tsx index 2d1b47a6c7..e1b48e648d 100644 --- a/src/packages/swipe/swipe.taro.tsx +++ b/src/packages/swipe/swipe.taro.tsx @@ -1,14 +1,8 @@ -import React, { - useRef, - forwardRef, - useState, - useImperativeHandle, - useEffect, -} from 'react' import type { MouseEvent } from 'react' +import React, { forwardRef, useImperativeHandle, useRef, useState } 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 { useReady } from '@tarojs/taro' import { BaseEventOrig } from '@tarojs/components/types/common' import { useTouch } from '@/utils/use-touch' import { getRectByTaro } from '@/utils/get-rect-by-taro' @@ -74,6 +68,7 @@ export const Swipe = forwardRef< >((props, instanceRef) => { const classPrefix = 'nut-swipe' const touch: any = useTouch() + const [rootWidth, setRootWidth] = useState(0) // 获取元素的时候要在页面 onReady 后，需要参考小程序的事件周期 useReady(() => { @@ -88,8 +83,13 @@ export const Swipe = forwardRef< rightRect && setActionWidth((v: any) => ({ ...v, right: rightRect.width })) } + if (root.current) { + const rootRect = await getRectByTaro(rightWrapper.current) + console.log('rootRect', rootRect.width) + rootRect && setRootWidth(rootRect.width) + } } - nextTick(() => getWidth()) + setTimeout(() => getWidth()) }) const { children, className, style } = { ...defaultProps, ...props } @@ -237,6 +237,9 @@ export const Swipe = forwardRef< handleOperate(e, side)} > {props[`${side}Action`]} @@ -262,26 +265,26 @@ export const Swipe = forwardRef< close: () => close(), })) - useEffect(() => { - const handler: any = (event: { target: Node | null }) => { - const targets = [root] - if ( - targets.some((targetItem) => { - const targetElement = targetItem.current || targetItem - return !targetElement || targetElement?.contains(event.target) - }) - ) { - return - } - close() - } - - document.addEventListener('touchstart', handler) - - return () => { - document.removeEventListener('touchstart', handler) - } - }, []) + // useEffect(() => { + // const handler: any = (event: { target: Node | null }) => { + // const targets = [root] + // if ( + // targets.some((targetItem) => { + // const targetElement = targetItem.current || targetItem + // return !targetElement || targetElement?.contains(event.target) + // }) + // ) { + // return + // } + // close() + // } + // + // document.addEventListener('touchstart', handler) + // + // return () => { + // document.removeEventListener('touchstart', handler) + // } + // }, []) return ( Date: Thu, 6 Jun 2024 17:08:43 +0800 Subject: [PATCH 03/10] =?UTF-8?q?feat(swipe):=20=E9=80=82=E9=85=8D?= =?UTF-8?q?=E9=B8=BF=E8=92=99=E3=80=81=E5=B0=8F=E7=A8=8B=E5=BA=8F=E3=80=81?= =?UTF-8?q?H5=EF=BC=9BRN=20=E5=9B=A0=E4=B8=BA=20createQuerySelector=20API?= =?UTF-8?q?=20=E4=B8=8D=E6=94=AF=E6=8C=81=EF=BC=8C=E6=89=80=E4=BB=A5?= =?UTF-8?q?=E6=9A=82=E6=97=B6=E4=B8=8D=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/swipe/demo.taro.tsx | 340 +----------------------- src/packages/swipe/demos/taro/demo1.tsx | 3 +- src/packages/swipe/demos/taro/demo2.tsx | 27 +- src/packages/swipe/demos/taro/demo3.tsx | 13 +- src/packages/swipe/demos/taro/demo4.tsx | 19 +- src/packages/swipe/demos/taro/demo5.tsx | 19 +- src/packages/swipe/demos/taro/demo6.tsx | 15 +- src/packages/swipe/demos/taro/demo7.tsx | 29 +- src/packages/swipe/demos/taro/demo8.tsx | 28 +- src/packages/swipe/demos/taro/demo9.tsx | 13 +- src/packages/swipe/swipe.harmony.css | 5 +- src/packages/swipe/swipe.scss | 8 +- src/packages/swipe/swipe.taro.tsx | 75 +++--- src/utils/px-transform.ts | 14 +- src/utils/use-touch.ts | 18 +- 15 files changed, 172 insertions(+), 454 deletions(-) diff --git a/src/packages/swipe/demo.taro.tsx b/src/packages/swipe/demo.taro.tsx index 7534e9092a..0e658a6789 100644 --- a/src/packages/swipe/demo.taro.tsx +++ b/src/packages/swipe/demo.taro.tsx @@ -1,7 +1,6 @@ import React from 'react' import Taro from '@tarojs/taro' import { ScrollView, View } from '@tarojs/components' -// import { Del } from '@nutui/icons-react-taro' import { useTranslate } from '@/sites/assets/locale/taro' import Header from '@/sites/components/header' import Demo1 from './demos/taro/demo1' @@ -12,7 +11,7 @@ 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' +import Demo9 from './demos/taro/demo9' const SwipeDemo = () => { const [translated] = useTranslate({ @@ -71,341 +70,8 @@ const SwipeDemo = () => { {translated.async} - {/* {translated.custom} */} - {/* */} - - {/* {translated.title9} */} - {/* */} - {/* <> */} - {/* {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', */} - {/* })} */} - {/* */} - {/* */} - {/* } */} - {/* > */} - {/* */} - {/* */} - - {/*
*/} - - {/* */} - {/* <> */} - {/* {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 */} - {/* )} */} - {/* */} - {/* */} - {/* } */} - {/* > */} - {/* */} - {/* */} - - {/* {translated.title8} */} - {/* */} - {/* */} - {/* {translated.del} */} - {/* */} - {/* } */} - {/* onTouchEnd={(e) => { */} - {/* setShouldCatchMove(false) */} - {/* }} */} - {/* onTouchMove={(e) => { */} - {/* setShouldCatchMove(true) */} - {/* }} */} - {/* > */} - {/* */} - {/* */} - {/* */} - - {/* {translated.title6} */} - {/* */} - {/* {translated.del} */} - {/* */} - {/* } */} - {/* style={{ marginBottom: '10px' }} */} - {/* > */} - {/* */} - {/* */} - {/*
*/} - {/* */} - {/* */} - {/*
*/} - {/* {translated.title7} */} - {/* */} - {/* {translated.del} */} - {/* */} - {/* } */} - {/* onActionClick={() => { */} - {/* ;(closeRef.current as any)?.close() */} - {/* }} */} - {/* > */} - {/* */} - {/* */} - {/* {translated.title2} */} - {/* */} - {/* {translated.del} */} - {/* */} - {/* } */} - {/* disabled */} - {/* > */} - {/* */} - {/* */} - {/* {translated.title3} */} - {/* */} - {/* {translated.choose} */} - {/* */} - {/* } */} - {/* rightAction={ */} - {/* <> */} - {/* */} - {/* */} - {/* */} - {/* } */} - {/* onActionClick={handleChange} */} - {/* onOpen={({ name, position }) => { */} - {/* // Toast.show(translated.open) */} - {/* toastShow(translated.open) */} - {/* }} */} - {/* onClose={handleClose} */} - {/* > */} - {/* */} - {/* */} - {/* {translated.title4} */} - {/* */} - {/* {translated.choose} */} - {/* */} - {/* } */} - {/* rightAction={ */} - {/* <> */} - {/* */} - {/* */} - {/* } */} - {/* > */} - {/* */} - {/* */} - {/* {translated.title5} */} - {/* */} - {/* */} - {/* */} - {/* } */} - {/* style={{ marginBottom: '30px' }} */} - {/* > */} - {/* */} - {/*
*/} - {/* {translated.goods} */} - {/* */} - {/*
*/} - {/* */} - {/* */} - {/* { */} - {/* SetShow(false) */} - {/* }} */} - {/* /> */} - {/* { */} - {/* refDom.current && refDom.current.close() */} - {/* setShowDialog(false) */} - {/* }} */} - {/* > */} - {/* {pRef.current === 'left' */} - {/* ? translated.chooseTips */} - {/* : translated.deleteTips} */} - {/* */} + {translated.custom} + ) diff --git a/src/packages/swipe/demos/taro/demo1.tsx b/src/packages/swipe/demos/taro/demo1.tsx index 1b96e77e67..11bef948c7 100644 --- a/src/packages/swipe/demos/taro/demo1.tsx +++ b/src/packages/swipe/demos/taro/demo1.tsx @@ -1,5 +1,6 @@ import React from 'react' import { Button, Cell, Swipe } from '@nutui/nutui-react-taro' +import pxTransform from '@/utils/px-transform' const App = () => { return ( @@ -9,7 +10,7 @@ const App = () => { diff --git a/src/packages/swipe/demos/taro/demo2.tsx b/src/packages/swipe/demos/taro/demo2.tsx index 7521ebcb7c..17bdb86099 100644 --- a/src/packages/swipe/demos/taro/demo2.tsx +++ b/src/packages/swipe/demos/taro/demo2.tsx @@ -1,23 +1,27 @@ import React from 'react' -import { Swipe, Cell } from '@nutui/nutui-react-taro' -import { View } from '@tarojs/components' -// import { Del } from '@nutui/icons-react-taro' +import { Cell, 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 ( - {/* */} - <>{text} + {!harmonyAndRn() ? ( + + ) : null} + {text} ) } @@ -26,14 +30,15 @@ const App = () => { return ( <> <> diff --git a/src/packages/swipe/demos/taro/demo3.tsx b/src/packages/swipe/demos/taro/demo3.tsx index 6138165b3a..69e748b251 100644 --- a/src/packages/swipe/demos/taro/demo3.tsx +++ b/src/packages/swipe/demos/taro/demo3.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react' import { View } from '@tarojs/components' import { Button, Cell, Swipe } from '@nutui/nutui-react-taro' +import pxTransform from '@/utils/px-transform' const App = () => { const [shouldCatchMove, setShouldCatchMove] = useState(false) @@ -10,7 +11,11 @@ const App = () => { + } @@ -21,7 +26,11 @@ const App = () => { setShouldCatchMove(true) }} > - + diff --git a/src/packages/swipe/demos/taro/demo4.tsx b/src/packages/swipe/demos/taro/demo4.tsx index 4c08f0896e..e41b02aa05 100644 --- a/src/packages/swipe/demos/taro/demo4.tsx +++ b/src/packages/swipe/demos/taro/demo4.tsx @@ -1,22 +1,31 @@ import React, { useRef } from 'react' -import { Button, Cell, Swipe } from '@nutui/nutui-react-taro' +import { Button, Cell, Swipe, SwipeInstance } from '@nutui/nutui-react-taro' +import pxTransform from '@/utils/px-transform' const App = () => { - const openRef = useRef(null) + const openRef = useRef(null) return ( <> + } > - + } onActionClick={() => { - closeRef.current.close() + closeRef.current?.close() }} > - + ) diff --git a/src/packages/swipe/demos/taro/demo6.tsx b/src/packages/swipe/demos/taro/demo6.tsx index 9b8444da8b..ea47b6c5fc 100644 --- a/src/packages/swipe/demos/taro/demo6.tsx +++ b/src/packages/swipe/demos/taro/demo6.tsx @@ -1,18 +1,27 @@ import React from 'react' -import { Swipe, Cell, Button } from '@nutui/nutui-react-taro' +import { Button, Cell, Swipe } from '@nutui/nutui-react-taro' +import pxTransform from '@/utils/px-transform' const App = () => { return ( <> + } disabled > - + ) diff --git a/src/packages/swipe/demos/taro/demo7.tsx b/src/packages/swipe/demos/taro/demo7.tsx index ed9800504c..d041441e03 100644 --- a/src/packages/swipe/demos/taro/demo7.tsx +++ b/src/packages/swipe/demos/taro/demo7.tsx @@ -1,6 +1,7 @@ import React from 'react' import Taro from '@tarojs/taro' import { Button, Cell, Swipe } from '@nutui/nutui-react-taro' +import pxTransform from '@/utils/px-transform' const App = () => { const handleChange = () => { @@ -10,16 +11,32 @@ const App = () => { <> + } rightAction={ <> - - @@ -28,7 +45,11 @@ const App = () => { onOpen={() => Taro.showToast({ title: '打开' })} onClose={() => Taro.showToast({ title: '关闭' })} > - + ) diff --git a/src/packages/swipe/demos/taro/demo8.tsx b/src/packages/swipe/demos/taro/demo8.tsx index 46295b53e6..0225d58aad 100644 --- a/src/packages/swipe/demos/taro/demo8.tsx +++ b/src/packages/swipe/demos/taro/demo8.tsx @@ -1,6 +1,12 @@ import React, { useRef, useState } from 'react' -import { Button, Cell, Dialog, Swipe } from '@nutui/nutui-react-taro' -import { SwipeInstance } from '@/packages/Swipe' +import { + Button, + Cell, + Dialog, + Swipe, + SwipeInstance, +} from '@nutui/nutui-react-taro' +import pxTransform from '@/utils/px-transform' const App = () => { const [showDialog, setShowDialog] = useState(false) @@ -17,19 +23,31 @@ const App = () => { ref={refDom} beforeClose={beforeClose} leftAction={ - } rightAction={ <> - } > - + { return ( @@ -8,13 +9,17 @@ const App = () => { - } > - + { }} > 商品 - + diff --git a/src/packages/swipe/swipe.harmony.css b/src/packages/swipe/swipe.harmony.css index 48883cf24c..979aa52191 100644 --- a/src/packages/swipe/swipe.harmony.css +++ b/src/packages/swipe/swipe.harmony.css @@ -12,7 +12,6 @@ justify-content: flex-start; align-self: stretch; width: 100%; - background: green; transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1); transition-property: transform; } @@ -21,12 +20,10 @@ top: 0; display: flex; flex-direction: row; - align-self: stretch; - align-items: stretch; } .nut-swipe-left { left: 0; } .nut-swipe-right { - right: 0; + left: 100%; } \ No newline at end of file diff --git a/src/packages/swipe/swipe.scss b/src/packages/swipe/swipe.scss index 0f0e5881b0..dcc54964f4 100644 --- a/src/packages/swipe/swipe.scss +++ b/src/packages/swipe/swipe.scss @@ -12,7 +12,6 @@ justify-content: flex-start; align-self: stretch; width: 100%; - background: green; transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1); transition-property: transform; } @@ -23,18 +22,13 @@ top: 0; display: flex; flex-direction: row; - align-self: stretch; - align-items: stretch; } &-left { left: 0; - //transform: translate(-100%, 0); } &-right { - right: 0; - //left: 100%; - //transform: translate(101%, 0); + left: 100%; } } diff --git a/src/packages/swipe/swipe.taro.tsx b/src/packages/swipe/swipe.taro.tsx index e1b48e648d..c95c238388 100644 --- a/src/packages/swipe/swipe.taro.tsx +++ b/src/packages/swipe/swipe.taro.tsx @@ -1,5 +1,11 @@ -import type { MouseEvent } from 'react' -import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react' +import React, { + forwardRef, + MouseEvent, + useEffect, + useImperativeHandle, + useRef, + useState, +} from 'react' import classNames from 'classnames' import { ITouchEvent, View } from '@tarojs/components' import { useReady } from '@tarojs/taro' @@ -79,15 +85,9 @@ export const Swipe = forwardRef< } if (rightWrapper.current) { const rightRect = await getRectByTaro(rightWrapper.current) - console.log('rightRect', rightRect.width) rightRect && setActionWidth((v: any) => ({ ...v, right: rightRect.width })) } - if (root.current) { - const rootRect = await getRectByTaro(rightWrapper.current) - console.log('rootRect', rootRect.width) - rootRect && setRootWidth(rootRect.width) - } } setTimeout(() => getWidth()) }) @@ -125,16 +125,11 @@ export const Swipe = forwardRef< const onTouchStart = async (event: BaseEventOrig) => { 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 })) } @@ -166,13 +161,6 @@ export const Swipe = forwardRef< -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 +182,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 { @@ -238,7 +225,9 @@ export const Swipe = forwardRef< ref={side === 'left' ? leftWrapper : rightWrapper} className={`${classPrefix}-${side}`} style={{ - transform: `${side === 'left' ? `translateX(-${rootWidth})` : `translateX(${rootWidth})`}`, + ...(side === 'left' + ? { left: Number(`${-actionWidth.current.left}`) } + : {}), }} onClick={(e) => handleOperate(e, side)} > @@ -265,26 +254,26 @@ export const Swipe = forwardRef< close: () => close(), })) - // useEffect(() => { - // const handler: any = (event: { target: Node | null }) => { - // const targets = [root] - // if ( - // targets.some((targetItem) => { - // const targetElement = targetItem.current || targetItem - // return !targetElement || targetElement?.contains(event.target) - // }) - // ) { - // return - // } - // close() - // } - // - // document.addEventListener('touchstart', handler) - // - // return () => { - // document.removeEventListener('touchstart', handler) - // } - // }, []) + useEffect(() => { + const handler: any = (event: { target: Node | null }) => { + const targets = [root] + if ( + targets.some((targetItem) => { + const targetElement = targetItem.current || targetItem + return !targetElement || targetElement?.contains(event.target) + }) + ) { + return + } + close() + } + + document.addEventListener('touchstart', handler) + + return () => { + document.removeEventListener('touchstart', handler) + } + }, []) return ( { - return touch.screenX || touch.clientX - } - - const getY = (touch: React.Touch) => { - return touch.screenY || touch.clientY - } - const start = (event: React.TouchEvent) => { reset() touchTime.current = Date.now() - startX.current = getX(event.touches[0]) - startY.current = getY(event.touches[0]) + startX.current = event.touches[0].clientX + startY.current = event.touches[0].clientY } const move = (event: React.TouchEvent) => { const touch = event.touches[0] - const clientX = getX(touch) - const clientY = getY(touch) // Fix: Safari back will set clientX to negative number - deltaX.current = clientX < 0 ? 0 : clientX - startX.current - deltaY.current = clientY - startY.current + deltaX.current = touch.clientX < 0 ? 0 : touch.clientX - startX.current + deltaY.current = touch.clientY - startY.current offsetX.current = Math.abs(deltaX.current) offsetY.current = Math.abs(deltaY.current) delta.current = isVertical() ? deltaY.current : deltaX.current From d76ca8682f0ce4e506c7cefa31588af11fa2b6a4 Mon Sep 17 00:00:00 2001 From: oasis-cloud Date: Wed, 12 Jun 2024 19:08:27 +0800 Subject: [PATCH 04/10] =?UTF-8?q?fix:=20=E6=8B=86=E5=88=86=20h5=20?= =?UTF-8?q?=E7=9A=84=20demo=EF=BC=8C=E4=BF=AE=E5=A4=8D=20usetouch?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../scripts/taro/adapted.js | 2 +- src/packages/swipe/demo.tsx | 433 +++--------------- src/packages/swipe/demos/h5/demo1.tsx | 27 ++ src/packages/swipe/demos/h5/demo2.tsx | 69 +++ src/packages/swipe/demos/h5/demo3.tsx | 37 ++ src/packages/swipe/demos/h5/demo4.tsx | 37 ++ src/packages/swipe/demos/h5/demo5.tsx | 32 ++ src/packages/swipe/demos/h5/demo6.tsx | 28 ++ src/packages/swipe/demos/h5/demo7.tsx | 55 +++ src/packages/swipe/demos/h5/demo8.tsx | 58 +++ src/packages/swipe/demos/h5/demo9.tsx | 36 ++ src/packages/swipe/demos/taro/demo1.tsx | 6 +- src/packages/swipe/demos/taro/demo4.tsx | 23 +- src/packages/swipe/demos/taro/demo8.tsx | 28 +- src/packages/swipe/demos/taro/demo9.tsx | 7 +- src/packages/swipe/swipe.taro.tsx | 4 +- src/utils/use-touch.ts | 25 +- 17 files changed, 492 insertions(+), 415 deletions(-) create mode 100644 src/packages/swipe/demos/h5/demo1.tsx create mode 100644 src/packages/swipe/demos/h5/demo2.tsx create mode 100644 src/packages/swipe/demos/h5/demo3.tsx create mode 100644 src/packages/swipe/demos/h5/demo4.tsx create mode 100644 src/packages/swipe/demos/h5/demo5.tsx create mode 100644 src/packages/swipe/demos/h5/demo6.tsx create mode 100644 src/packages/swipe/demos/h5/demo7.tsx create mode 100644 src/packages/swipe/demos/h5/demo8.tsx create mode 100644 src/packages/swipe/demos/h5/demo9.tsx diff --git a/packages/nutui-taro-demo-rn/scripts/taro/adapted.js b/packages/nutui-taro-demo-rn/scripts/taro/adapted.js index b9ce46883d..f373900c78 100644 --- a/packages/nutui-taro-demo-rn/scripts/taro/adapted.js +++ b/packages/nutui-taro-demo-rn/scripts/taro/adapted.js @@ -1 +1 @@ -exports = module.exports = ["cell","cellgroup","overlay","button","switch","countdown","empty","price","tag","layout","row","col","space","grid","griditem","divider","image","resultpage","notify","pagination","swiper","swipe"]; +exports = module.exports = ["cell","cellgroup","overlay","button","switch","countdown","empty","price","tag","layout","row","col","space","grid","griditem","divider","image","resultpage","notify","pagination","swiper","swipe"]; \ No newline at end of file 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({ + 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(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 ( -
- {hasIcon ? : null} - <>{text} -
- ) - } return ( <> -
-

{translated.title1}

- - {translated.del} - - } - onTouchStart={(event) => console.log('touch start', event)} - onTouchMove={(event) => console.log('touch Move', event)} - onTouchEnd={(event) => console.log('touch End', event)} - > - - -

{translated.title8}

- - <> - {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', - })} - -
- } - > - - -
- - - <> - {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 - )} - - - } - > - - -

{translated.title6}

- - {translated.del} - - } - style={{ marginBottom: '10px' }} - > - - -
- - -
-

{translated.title7}

- - {translated.del} - - } - onActionClick={() => { - ;(closeRef.current as any)?.close() - }} - > - - -

{translated.title2}

- - {translated.del} - - } - disabled - > - - -

{translated.title3}

- - {translated.choose} - - } - rightAction={ - <> - - - - } - onActionClick={handleChange} - onOpen={({ name, position }) => { - Toast.show(translated.open) - }} - onClose={handleClose} - > - - -

{translated.title4}

- - {translated.choose} - - } - rightAction={ - <> - - - } - > - - -

{translated.title5}

- - - - } - style={{ marginBottom: '30px' }} - > - -
- {translated.goods} - -
- - +
+

{translated.base}

+ +

{translated.card}

+ +

{translated.catchMove}

+ +

{translated.byRef}

+ +

{translated.close}

+ +

{translated.disabled}

+ +

{translated.event}

+ +

{translated.async}

+ +

{translated.custom}

+
) 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 ( + <> + + 删除 + + } + > + + + + ) +} +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 ( +
+ + <>{text} +
+ ) +} + +const App = () => { + return ( + <> + + <> + {ViewNode('设置常买', { + background: '#F8F8F8', + color: '#1A1A1A', + })} + {ViewNode('移入收藏', { + background: '#ffcc00', + color: '#FFF', + })} + {ViewNode('看相似', { + background: '#FF860D', + color: '#FFF', + })} + {ViewNode('删除', { + background: '#FA2C19', + color: '#FFF', + })} + + + } + > + + + + ) +} +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 ( + <> +
+ + 删除 + + } + onTouchEnd={(e) => { + setShouldCatchMove(false) + }} + onTouchMove={(e) => { + setShouldCatchMove(true) + }} + > + + +
+ + ) +} +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(null) + return ( + <> + + 删除 + + } + > + + + + + + ) +} +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(null) + return ( + <> + + 删除 + + } + onActionClick={() => { + closeRef.current?.close() + }} + > + + + + ) +} +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 ( + <> + + 删除 + + } + disabled + > + + + + ) +} +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..08c25a032f --- /dev/null +++ b/src/packages/swipe/demos/h5/demo7.tsx @@ -0,0 +1,55 @@ +import React from 'react' +import { Button, Cell, Swipe, Toast } from '@nutui/nutui-react' + +const App = () => { + const handleChange = () => { + Toast.show({ title: 'title' }) + } + return ( + <> + + 选择 + + } + rightAction={ + <> + + + + } + onActionClick={handleChange} + onOpen={() => Toast.show({ title: '打开' })} + onClose={() => Toast.show({ title: '关闭' })} + > + + + + ) +} +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(null) + const pRef = useRef('left') + const beforeClose = (postion: string) => { + pRef.current = postion + setShowDialog(true) + } + + return ( + <> + + 选择 + + } + rightAction={ + <> + + + } + > + + + { + refDom.current && refDom.current.close() + setShowDialog(false) + }} + > + {pRef.current === 'left' ? '确定选择吗？' : '确定删除吗？'} + + + ) +} +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 ( + <> + + + + } + > + +
+ 商品 + +
+ + + + ) +} +export default App diff --git a/src/packages/swipe/demos/taro/demo1.tsx b/src/packages/swipe/demos/taro/demo1.tsx index 11bef948c7..25418ab8f5 100644 --- a/src/packages/swipe/demos/taro/demo1.tsx +++ b/src/packages/swipe/demos/taro/demo1.tsx @@ -19,7 +19,11 @@ const App = () => { diff --git a/src/packages/swipe/demos/taro/demo4.tsx b/src/packages/swipe/demos/taro/demo4.tsx index e41b02aa05..b09faff27d 100644 --- a/src/packages/swipe/demos/taro/demo4.tsx +++ b/src/packages/swipe/demos/taro/demo4.tsx @@ -1,5 +1,6 @@ import React, { useRef } from 'react' import { Button, Cell, Swipe, SwipeInstance } from '@nutui/nutui-react-taro' +import { Text, View } from '@tarojs/components' import pxTransform from '@/utils/px-transform' const App = () => { @@ -21,17 +22,21 @@ const App = () => { - - + + + + ) } diff --git a/src/packages/swipe/demos/taro/demo8.tsx b/src/packages/swipe/demos/taro/demo8.tsx index 0225d58aad..7a0fd0fa3a 100644 --- a/src/packages/swipe/demos/taro/demo8.tsx +++ b/src/packages/swipe/demos/taro/demo8.tsx @@ -1,11 +1,5 @@ import React, { useRef, useState } from 'react' -import { - Button, - Cell, - Dialog, - Swipe, - SwipeInstance, -} from '@nutui/nutui-react-taro' +import { Button, Cell, Swipe, SwipeInstance } from '@nutui/nutui-react-taro' import pxTransform from '@/utils/px-transform' const App = () => { @@ -49,16 +43,16 @@ const App = () => { style={{ margin: 0, alignSelf: 'stretch' }} /> - { - refDom.current && refDom.current.close() - setShowDialog(false) - }} - > - {pRef.current === 'left' ? '确定选择吗？' : '确定删除吗？'} - + {/* { */} + {/* refDom.current && refDom.current.close() */} + {/* setShowDialog(false) */} + {/* }} */} + {/* > */} + {/* {pRef.current === 'left' ? '确定选择吗？' : '确定删除吗？'} */} + {/* */} ) } diff --git a/src/packages/swipe/demos/taro/demo9.tsx b/src/packages/swipe/demos/taro/demo9.tsx index 55a3e3762e..24480e6255 100644 --- a/src/packages/swipe/demos/taro/demo9.tsx +++ b/src/packages/swipe/demos/taro/demo9.tsx @@ -1,7 +1,8 @@ import React from 'react' import { Button, Cell, InputNumber, Swipe } from '@nutui/nutui-react-taro' -import { View } from '@tarojs/components' +import { Text, View } from '@tarojs/components' import pxTransform from '../../../../utils/px-transform' +import { harmonyAndRn } from '@/utils/platform-taro' const App = () => { return ( @@ -27,8 +28,8 @@ const App = () => { width: '100%', }} > - 商品 - + 商品 + {!harmonyAndRn() ? : null} diff --git a/src/packages/swipe/swipe.taro.tsx b/src/packages/swipe/swipe.taro.tsx index c95c238388..becf63cc3c 100644 --- a/src/packages/swipe/swipe.taro.tsx +++ b/src/packages/swipe/swipe.taro.tsx @@ -13,6 +13,7 @@ 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 { harmonyAndRn } from '@/utils/platform-taro' export type SwipeSide = 'left' | 'right' @@ -150,7 +151,6 @@ export const Swipe = forwardRef< 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) { @@ -255,6 +255,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 14dc0f1407..c5c4bbed83 100644 --- a/src/utils/use-touch.ts +++ b/src/utils/use-touch.ts @@ -41,18 +41,33 @@ export function useTouch() { last.current = false } + const getTouch = (event: React.TouchEvent) => { + const touch = event.touches ? event.touches[0] : event.nativeEvent + return touch as React.Touch + } + + const getX = (touch: React.Touch) => { + return touch.screenX || touch.clientX || touch.pageX + } + + const getY = (touch: React.Touch) => { + return touch.screenY || touch.clientY || touch.pageY + } + const start = (event: React.TouchEvent) => { reset() touchTime.current = Date.now() - startX.current = event.touches[0].clientX - startY.current = event.touches[0].clientY + startX.current = getX(getTouch(event)) + startY.current = getY(getTouch(event)) } const move = (event: React.TouchEvent) => { - 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 - deltaX.current = touch.clientX < 0 ? 0 : touch.clientX - startX.current - deltaY.current = touch.clientY - startY.current + deltaX.current = clientX < 0 ? 0 : clientX - startX.current + deltaY.current = clientY - startY.current offsetX.current = Math.abs(deltaX.current) offsetY.current = Math.abs(deltaY.current) delta.current = isVertical() ? deltaY.current : deltaX.current From a4307a93653b8980102d394791ac553a639d269a Mon Sep 17 00:00:00 2001 From: oasis-cloud Date: Wed, 12 Jun 2024 19:17:42 +0800 Subject: [PATCH 05/10] =?UTF-8?q?fix:=20=E6=8B=86=E5=88=86=20h5=20?= =?UTF-8?q?=E7=9A=84=20demo=EF=BC=8C=E4=BF=AE=E5=A4=8D=20usetouch?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/swipe/demos/h5/demo7.tsx | 1 - src/packages/swipe/demos/taro/demo7.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/src/packages/swipe/demos/h5/demo7.tsx b/src/packages/swipe/demos/h5/demo7.tsx index 08c25a032f..8fcdb5eb11 100644 --- a/src/packages/swipe/demos/h5/demo7.tsx +++ b/src/packages/swipe/demos/h5/demo7.tsx @@ -15,7 +15,6 @@ const App = () => { style={{ alignSelf: 'stretch', height: 46, - zIndex: 20, }} > 选择 diff --git a/src/packages/swipe/demos/taro/demo7.tsx b/src/packages/swipe/demos/taro/demo7.tsx index d041441e03..33371873cc 100644 --- a/src/packages/swipe/demos/taro/demo7.tsx +++ b/src/packages/swipe/demos/taro/demo7.tsx @@ -17,7 +17,6 @@ const App = () => { style={{ alignSelf: 'stretch', height: pxTransform(46), - zIndex: 20, }} > 选择 From ab96662a01a50624f895db566211e73b0f9c5a62 Mon Sep 17 00:00:00 2001 From: oasis-cloud Date: Tue, 18 Jun 2024 15:22:19 +0800 Subject: [PATCH 06/10] =?UTF-8?q?chore:=20=E5=88=A0=E9=99=A4=E6=97=A0?= =?UTF-8?q?=E6=95=88=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/swipe/swipe.taro.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/packages/swipe/swipe.taro.tsx b/src/packages/swipe/swipe.taro.tsx index becf63cc3c..46fc80efd0 100644 --- a/src/packages/swipe/swipe.taro.tsx +++ b/src/packages/swipe/swipe.taro.tsx @@ -75,7 +75,6 @@ export const Swipe = forwardRef< >((props, instanceRef) => { const classPrefix = 'nut-swipe' const touch: any = useTouch() - const [rootWidth, setRootWidth] = useState(0) // 获取元素的时候要在页面 onReady 后，需要参考小程序的事件周期 useReady(() => { From 59a1449ec0490168866564817116e1be27415970 Mon Sep 17 00:00:00 2001 From: oasis-cloud Date: Tue, 18 Jun 2024 16:34:10 +0800 Subject: [PATCH 07/10] =?UTF-8?q?fix:=20taro=20=E4=BA=8B=E4=BB=B6=E5=9C=A8?= =?UTF-8?q?=E9=B8=BF=E8=92=99=E4=B8=8B=E9=9C=80=E8=A6=81=E8=BF=9B=E8=A1=8C?= =?UTF-8?q?=20px=20=E8=BD=AC=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/swipe/swipe.taro.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/packages/swipe/swipe.taro.tsx b/src/packages/swipe/swipe.taro.tsx index 46fc80efd0..44e8b651e4 100644 --- a/src/packages/swipe/swipe.taro.tsx +++ b/src/packages/swipe/swipe.taro.tsx @@ -13,7 +13,8 @@ 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 { harmonyAndRn } from '@/utils/platform-taro' +import { harmony, harmonyAndRn } from '@/utils/platform-taro' +import pxTransform from '@/utils/px-transform' export type SwipeSide = 'left' | 'right' @@ -85,6 +86,7 @@ export const Swipe = forwardRef< } if (rightWrapper.current) { const rightRect = await getRectByTaro(rightWrapper.current) + rightRect && setActionWidth((v: any) => ({ ...v, right: rightRect.width })) } @@ -155,8 +157,11 @@ export const Swipe = forwardRef< 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 ) From b21886908c253acc583c58d6dd4b39f24fdb42fc Mon Sep 17 00:00:00 2001 From: oasis-cloud Date: Tue, 18 Jun 2024 18:36:45 +0800 Subject: [PATCH 08/10] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=AF=B9=20rea?= =?UTF-8?q?ct=20native=20=E7=9A=84=E6=94=AF=E6=8C=81=EF=BC=8C=E4=BD=86?= =?UTF-8?q?=E6=98=AF=E7=88=B6=E7=BB=84=E4=BB=B6=E6=B7=BB=E5=8A=A0=20ontouc?= =?UTF-8?q?h=20=E4=BA=8B=E4=BB=B6=EF=BC=8C=E5=AD=90=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20onclick=20=E4=BA=8B=E4=BB=B6=EF=BC=8C?= =?UTF-8?q?=E4=BC=9A=E5=AF=BC=E8=87=B4=E7=88=B6=E7=BB=84=E4=BB=B6=E7=9A=84?= =?UTF-8?q?=20ontouch=20=E4=BA=8B=E4=BB=B6=E4=B8=8D=E8=A7=A6=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../scripts/taro/adapted.js | 33 +------------------ packages/nutui-taro-demo-rn/src/app.config.ts | 3 +- src/packages/swipe/demos/taro/demo1.tsx | 5 ++- src/packages/swipe/demos/taro/demo2.tsx | 13 +++++--- src/packages/swipe/demos/taro/demo3.tsx | 5 ++- src/packages/swipe/demos/taro/demo4.tsx | 5 ++- src/packages/swipe/demos/taro/demo5.tsx | 5 ++- src/packages/swipe/demos/taro/demo6.tsx | 5 ++- src/packages/swipe/demos/taro/demo7.tsx | 5 ++- src/packages/swipe/demos/taro/demo8.tsx | 5 ++- src/packages/swipe/demos/taro/demo9.tsx | 8 ++++- src/packages/swipe/swipe.harmony.css | 1 - src/packages/swipe/swipe.scss | 2 +- src/packages/swipe/swipe.taro.tsx | 6 ++-- src/utils/use-touch.ts | 10 ++++-- 15 files changed, 56 insertions(+), 55 deletions(-) diff --git a/packages/nutui-taro-demo-rn/scripts/taro/adapted.js b/packages/nutui-taro-demo-rn/scripts/taro/adapted.js index 89167c6ddd..b193f7c957 100644 --- a/packages/nutui-taro-demo-rn/scripts/taro/adapted.js +++ b/packages/nutui-taro-demo-rn/scripts/taro/adapted.js @@ -1,32 +1 @@ -exports = module.exports = [ - 'cell', - 'cellgroup', - 'overlay', - 'button', - 'switch', - 'countdown', - 'empty', - 'price', - 'tag', - 'layout', - 'row', - 'col', - 'space', - 'grid', - 'griditem', - 'divider', - 'image', - 'resultpage', - 'skeleton', - 'notify', - 'pagination', - 'swiper', - 'textarea', - 'indicator', - 'hoverbutton', - 'safearea', - 'hoverbuttonitem', - 'configprovider', - 'input', - 'swipe', -] +exports = module.exports = ["cell","cellgroup","overlay","button","switch","countdown","empty","price","tag","layout","row","col","space","grid","griditem","divider","image","resultpage","skeleton","notify","pagination","swiper","textarea","indicator","hoverbutton","safearea","hoverbuttonitem","configprovider","input","swipe"]; \ No newline at end of file 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/src/packages/swipe/demos/taro/demo1.tsx b/src/packages/swipe/demos/taro/demo1.tsx index 25418ab8f5..714a217294 100644 --- a/src/packages/swipe/demos/taro/demo1.tsx +++ b/src/packages/swipe/demos/taro/demo1.tsx @@ -20,9 +20,8 @@ const App = () => { title="左滑删除" radius={0} style={{ - margin: 0, - alignSelf: 'stretch', - boxShadow: '0px 0px 0px 0px rgb(237, 238, 241)', + width: '100%', + marginBottom: 0, }} /> diff --git a/src/packages/swipe/demos/taro/demo2.tsx b/src/packages/swipe/demos/taro/demo2.tsx index 17bdb86099..b906e9387c 100644 --- a/src/packages/swipe/demos/taro/demo2.tsx +++ b/src/packages/swipe/demos/taro/demo2.tsx @@ -43,19 +43,19 @@ const App = () => { > <> {ViewNode('设置常买', { - background: '#F8F8F8', + backgroundColor: '#F8F8F8', color: '#1A1A1A', })} {ViewNode('移入收藏', { - background: '#ffcc00', + backgroundColor: '#ffcc00', color: '#FFF', })} {ViewNode('看相似', { - background: '#FF860D', + backgroundColor: '#FF860D', color: '#FFF', })} {ViewNode('删除', { - background: '#FA2C19', + backgroundColor: '#FA2C19', color: '#FFF', })} @@ -65,7 +65,10 @@ const App = () => { diff --git a/src/packages/swipe/demos/taro/demo3.tsx b/src/packages/swipe/demos/taro/demo3.tsx index 69e748b251..92a86c67df 100644 --- a/src/packages/swipe/demos/taro/demo3.tsx +++ b/src/packages/swipe/demos/taro/demo3.tsx @@ -29,7 +29,10 @@ const App = () => { diff --git a/src/packages/swipe/demos/taro/demo4.tsx b/src/packages/swipe/demos/taro/demo4.tsx index b09faff27d..26af063b5e 100644 --- a/src/packages/swipe/demos/taro/demo4.tsx +++ b/src/packages/swipe/demos/taro/demo4.tsx @@ -22,7 +22,10 @@ const App = () => { diff --git a/src/packages/swipe/demos/taro/demo5.tsx b/src/packages/swipe/demos/taro/demo5.tsx index debe86ee68..9b5f13d9a9 100644 --- a/src/packages/swipe/demos/taro/demo5.tsx +++ b/src/packages/swipe/demos/taro/demo5.tsx @@ -24,7 +24,10 @@ const App = () => { diff --git a/src/packages/swipe/demos/taro/demo6.tsx b/src/packages/swipe/demos/taro/demo6.tsx index ea47b6c5fc..4914b235d9 100644 --- a/src/packages/swipe/demos/taro/demo6.tsx +++ b/src/packages/swipe/demos/taro/demo6.tsx @@ -20,7 +20,10 @@ const App = () => { diff --git a/src/packages/swipe/demos/taro/demo7.tsx b/src/packages/swipe/demos/taro/demo7.tsx index 33371873cc..1c6ed171ea 100644 --- a/src/packages/swipe/demos/taro/demo7.tsx +++ b/src/packages/swipe/demos/taro/demo7.tsx @@ -47,7 +47,10 @@ const App = () => { diff --git a/src/packages/swipe/demos/taro/demo8.tsx b/src/packages/swipe/demos/taro/demo8.tsx index 7a0fd0fa3a..1495732a49 100644 --- a/src/packages/swipe/demos/taro/demo8.tsx +++ b/src/packages/swipe/demos/taro/demo8.tsx @@ -40,7 +40,10 @@ const App = () => { {/* { } > - + ({ ...v, right: rightRect.width })) } @@ -149,7 +148,6 @@ export const Swipe = forwardRef< touch.move(event) props.onTouchMove?.(event) - if (touch.isHorizontal()) { lockClick.current = true const newState = { ...state, dragging: true } @@ -285,7 +283,9 @@ export const Swipe = forwardRef< onTouchStart(e)} + onTouchStart={(e) => { + onTouchStart(e) + }} onTouchMove={(e) => onTouchMove(e)} onTouchEnd={(e) => onTouchEnd(e)} style={style} diff --git a/src/utils/use-touch.ts b/src/utils/use-touch.ts index c5c4bbed83..e6d17cfc08 100644 --- a/src/utils/use-touch.ts +++ b/src/utils/use-touch.ts @@ -47,11 +47,17 @@ export function useTouch() { } const getX = (touch: React.Touch) => { - return touch.screenX || touch.clientX || touch.pageX + if (typeof touch.screenX !== 'undefined') return touch.screenX + if (typeof touch.pageX !== 'undefined') return touch.pageX + if (typeof touch.clientX !== 'undefined') return touch.clientX + return 0 } const getY = (touch: React.Touch) => { - return touch.screenY || touch.clientY || touch.pageY + if (typeof touch.screenY !== 'undefined') return touch.screenY + if (typeof touch.pageY !== 'undefined') return touch.pageY + if (typeof touch.clientY !== 'undefined') return touch.clientY + return 0 } const start = (event: React.TouchEvent) => { From ed05b2eee82d3b04172a6080fc1b982bbcf28ff8 Mon Sep 17 00:00:00 2001 From: oasis-cloud Date: Tue, 18 Jun 2024 21:39:26 +0800 Subject: [PATCH 09/10] =?UTF-8?q?feat:=20demo=20=E4=B8=AD=E7=A7=BB?= =?UTF-8?q?=E9=99=A4=20cell?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/base/profile/main_pages.json | 4 +- src/packages/swipe/demos/taro/demo1.tsx | 21 +++++++---- src/packages/swipe/demos/taro/demo2.tsx | 20 ++++++---- src/packages/swipe/demos/taro/demo3.tsx | 22 +++++++---- src/packages/swipe/demos/taro/demo4.tsx | 22 +++++++---- src/packages/swipe/demos/taro/demo5.tsx | 21 +++++++---- src/packages/swipe/demos/taro/demo6.tsx | 21 +++++++---- src/packages/swipe/demos/taro/demo7.tsx | 30 ++++++++++----- src/packages/swipe/demos/taro/demo8.tsx | 26 +++++++++---- src/packages/swipe/demos/taro/demo9.tsx | 37 +++++++++++-------- src/packages/swipe/swipe.harmony.css | 1 + src/packages/swipe/swipe.scss | 2 +- src/packages/swipe/swipe.taro.tsx | 26 ++++++++----- 13 files changed, 165 insertions(+), 88 deletions(-) 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/src/packages/swipe/demos/taro/demo1.tsx b/src/packages/swipe/demos/taro/demo1.tsx index 714a217294..69b85cf1d7 100644 --- a/src/packages/swipe/demos/taro/demo1.tsx +++ b/src/packages/swipe/demos/taro/demo1.tsx @@ -1,5 +1,6 @@ import React from 'react' -import { Button, Cell, Swipe } from '@nutui/nutui-react-taro' +import { Button, Swipe } from '@nutui/nutui-react-taro' +import { Text, View } from '@tarojs/components' import pxTransform from '@/utils/px-transform' const App = () => { @@ -12,18 +13,24 @@ const App = () => { shape="square" style={{ alignSelf: 'stretch', height: pxTransform(46) }} > - 删除 + + 删除 + } > - + > + 左滑删除 + ) diff --git a/src/packages/swipe/demos/taro/demo2.tsx b/src/packages/swipe/demos/taro/demo2.tsx index b906e9387c..7686c5043d 100644 --- a/src/packages/swipe/demos/taro/demo2.tsx +++ b/src/packages/swipe/demos/taro/demo2.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { Cell, Swipe } from '@nutui/nutui-react-taro' +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' @@ -21,7 +21,9 @@ const ViewNode = (text: string, style: any) => { {!harmonyAndRn() ? ( ) : null} - {text} + + {text} + ) } @@ -62,14 +64,18 @@ const App = () => { } > - + > + 左滑 + ) diff --git a/src/packages/swipe/demos/taro/demo3.tsx b/src/packages/swipe/demos/taro/demo3.tsx index 92a86c67df..9c52bdfaa8 100644 --- a/src/packages/swipe/demos/taro/demo3.tsx +++ b/src/packages/swipe/demos/taro/demo3.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react' -import { View } from '@tarojs/components' -import { Button, Cell, Swipe } from '@nutui/nutui-react-taro' +import { Text, View } from '@tarojs/components' +import { Button, Swipe } from '@nutui/nutui-react-taro' import pxTransform from '@/utils/px-transform' const App = () => { @@ -16,7 +16,9 @@ const App = () => { shape="square" style={{ alignSelf: 'stretch', height: pxTransform(46) }} > - 删除 + + 删除 + } onTouchEnd={(e) => { @@ -26,14 +28,18 @@ const App = () => { setShouldCatchMove(true) }} > - + > + 左滑删除 + diff --git a/src/packages/swipe/demos/taro/demo4.tsx b/src/packages/swipe/demos/taro/demo4.tsx index 26af063b5e..0573a92df2 100644 --- a/src/packages/swipe/demos/taro/demo4.tsx +++ b/src/packages/swipe/demos/taro/demo4.tsx @@ -1,5 +1,5 @@ import React, { useRef } from 'react' -import { Button, Cell, Swipe, SwipeInstance } from '@nutui/nutui-react-taro' +import { Button, Swipe, SwipeInstance } from '@nutui/nutui-react-taro' import { Text, View } from '@tarojs/components' import pxTransform from '@/utils/px-transform' @@ -15,18 +15,26 @@ const App = () => { type="danger" style={{ alignSelf: 'stretch', height: pxTransform(46) }} > - 删除 + + 删除 + } > - + > + + 点击下方按钮打开或关闭 + + } onActionClick={() => { closeRef.current?.close() }} > - + > + 点击右侧按钮关闭 + ) diff --git a/src/packages/swipe/demos/taro/demo6.tsx b/src/packages/swipe/demos/taro/demo6.tsx index 4914b235d9..a246ffaba4 100644 --- a/src/packages/swipe/demos/taro/demo6.tsx +++ b/src/packages/swipe/demos/taro/demo6.tsx @@ -1,5 +1,6 @@ import React from 'react' -import { Button, Cell, Swipe } from '@nutui/nutui-react-taro' +import { Button, Swipe } from '@nutui/nutui-react-taro' +import { View, Text } from '@tarojs/components' import pxTransform from '@/utils/px-transform' const App = () => { @@ -12,19 +13,25 @@ const App = () => { type="danger" style={{ alignSelf: 'stretch', height: pxTransform(46) }} > - 删除 + + 删除 + } disabled > - + > + 禁用滑动 + ) diff --git a/src/packages/swipe/demos/taro/demo7.tsx b/src/packages/swipe/demos/taro/demo7.tsx index 1c6ed171ea..14b4ea23b5 100644 --- a/src/packages/swipe/demos/taro/demo7.tsx +++ b/src/packages/swipe/demos/taro/demo7.tsx @@ -1,6 +1,7 @@ import React from 'react' import Taro from '@tarojs/taro' -import { Button, Cell, Swipe } from '@nutui/nutui-react-taro' +import { Button, Swipe } from '@nutui/nutui-react-taro' +import { Text, View } from '@tarojs/components' import pxTransform from '@/utils/px-transform' const App = () => { @@ -19,7 +20,9 @@ const App = () => { height: pxTransform(46), }} > - 选择 + + 选择 + } rightAction={ @@ -29,14 +32,18 @@ const App = () => { type="danger" style={{ alignSelf: 'stretch', height: pxTransform(46) }} > - 删除 + + 删除 + } @@ -44,14 +51,19 @@ const App = () => { onOpen={() => Taro.showToast({ title: '打开' })} onClose={() => Taro.showToast({ title: '关闭' })} > - + > + 事件 + ) diff --git a/src/packages/swipe/demos/taro/demo8.tsx b/src/packages/swipe/demos/taro/demo8.tsx index 1495732a49..27ecc2f0ee 100644 --- a/src/packages/swipe/demos/taro/demo8.tsx +++ b/src/packages/swipe/demos/taro/demo8.tsx @@ -1,5 +1,6 @@ import React, { useRef, useState } from 'react' -import { Button, Cell, Swipe, SwipeInstance } from '@nutui/nutui-react-taro' +import { Button, Swipe, SwipeInstance } from '@nutui/nutui-react-taro' +import { Text, View } from '@tarojs/components' import pxTransform from '@/utils/px-transform' const App = () => { @@ -22,7 +23,9 @@ const App = () => { type="success" style={{ alignSelf: 'stretch', height: pxTransform(46) }} > - 选择 + + 选择 + } rightAction={ @@ -32,19 +35,26 @@ const App = () => { type="danger" style={{ alignSelf: 'stretch', height: pxTransform(46) }} > - 删除 + + 删除 + } > - + > + 事件 + {/* { type="danger" style={{ alignSelf: 'stretch', height: pxTransform(46) }} > - 加入购物车 + + 加入购物车 + } > - - - 商品 - {!harmonyAndRn() ? : null} + + + 商品 + {!harmonyAndRn() ? : null} + - + ) diff --git a/src/packages/swipe/swipe.harmony.css b/src/packages/swipe/swipe.harmony.css index 7b3e1d7e47..979aa52191 100644 --- a/src/packages/swipe/swipe.harmony.css +++ b/src/packages/swipe/swipe.harmony.css @@ -4,6 +4,7 @@ position: relative; overflow: hidden; cursor: grab; + background-color: #ffffff; } .nut-swipe-wrapper { display: flex; diff --git a/src/packages/swipe/swipe.scss b/src/packages/swipe/swipe.scss index 716300c5b2..dcc54964f4 100644 --- a/src/packages/swipe/swipe.scss +++ b/src/packages/swipe/swipe.scss @@ -4,7 +4,7 @@ position: relative; overflow: hidden; cursor: grab; - //background-color: $white; + background-color: $white; &-wrapper { display: flex; diff --git a/src/packages/swipe/swipe.taro.tsx b/src/packages/swipe/swipe.taro.tsx index f959644f9a..f1579c2c88 100644 --- a/src/packages/swipe/swipe.taro.tsx +++ b/src/packages/swipe/swipe.taro.tsx @@ -8,13 +8,13 @@ import React, { } from 'react' import classNames from 'classnames' import { ITouchEvent, View } from '@tarojs/components' -import { useReady } from '@tarojs/taro' 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' @@ -78,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) @@ -86,13 +86,13 @@ export const Swipe = forwardRef< } if (rightWrapper.current) { const rightRect = await getRectByTaro(rightWrapper.current) - + console.log('actionWidth.current.left', rightRect.width) rightRect && setActionWidth((v: any) => ({ ...v, right: rightRect.width })) } } setTimeout(() => getWidth()) - }) + }, []) const { children, className, style } = { ...defaultProps, ...props } @@ -106,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 = { @@ -125,6 +131,7 @@ export const Swipe = forwardRef< } const onTouchStart = async (event: BaseEventOrig) => { + console.log('ontouchstart') if (leftWrapper.current) { const leftRect = await getRectByTaro(leftWrapper.current) leftRect && setActionWidth((v: any) => ({ ...v, left: leftRect.width })) @@ -222,6 +229,7 @@ export const Swipe = forwardRef< const rightWrapper = useRef(null) const renderActionContent = (side: SwipeSide) => { if (props[`${side}Action`]) { + console.log('actionWidth xxx', actionWidth.current.left) return ( { - onTouchStart(e) - }} + onTouchStart={(e) => onTouchStart(e)} onTouchMove={(e) => onTouchMove(e)} onTouchEnd={(e) => onTouchEnd(e)} style={style} From 8cc51cc612d760c0f63b43cc1fde8e45fe07905c Mon Sep 17 00:00:00 2001 From: oasis-cloud Date: Wed, 19 Jun 2024 18:37:42 +0800 Subject: [PATCH 10/10] =?UTF-8?q?fix:=20rn=20=E7=94=A8=20pagex=EF=BC=8Char?= =?UTF-8?q?mony=20=E7=94=A8=20screenx=EF=BC=8C=E5=85=B6=E4=BB=96=E7=94=A8?= =?UTF-8?q?=20clientx=EF=BC=8Crn=20=E5=8F=AF=E8=83=BD=E5=90=8C=E6=97=B6?= =?UTF-8?q?=E8=8E=B7=E5=8F=96=E5=88=B0=20clientx=20pagex=EF=BC=8C=E4=BC=98?= =?UTF-8?q?=E5=85=88pagex?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/use-touch.ts | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/src/utils/use-touch.ts b/src/utils/use-touch.ts index e6d17cfc08..8653eea888 100644 --- a/src/utils/use-touch.ts +++ b/src/utils/use-touch.ts @@ -47,16 +47,26 @@ export function useTouch() { } const getX = (touch: React.Touch) => { - if (typeof touch.screenX !== 'undefined') return touch.screenX - if (typeof touch.pageX !== 'undefined') return touch.pageX + 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) => { - if (typeof touch.screenY !== 'undefined') return touch.screenY - if (typeof touch.pageY !== 'undefined') return touch.pageY + 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 }