feat(v15): swipe 增加 v15 的 demo (#3160)

Author: oasis-cloud

src/packages/swipe/demos/h5/demo2.tsx

@@ -7,8 +7,8 @@ const ViewNode = (text: string, style: any) => {
     <div
       style={{
         display: 'flex',
-        width: 60,
-        height: 104,
+        width: 56,
+        height: 96,
         flexDirection: 'column',
         justifyContent: 'center',
         alignItems: 'center',
@@ -25,32 +25,34 @@ const App = () => {
   return (
     <>
       <Swipe
-        style={{ height: 104 }}
+        style={{ height: 96 }}
         rightAction={
           <div
             style={{
               display: 'flex',
               flexDirection: 'row',
-              width: 240,
-              height: 104,
+              width: 224,
+              height: 96,
               fontSize: 12,
+              borderRadius: 8,
+              overflow: 'hidden',
             }}
           >
             <>
-              {ViewNode('设置常买', {
-                background: '#F8F8F8',
-                color: '#1A1A1A',
+              {ViewNode('加常买', {
+                background: '#fff4e8',
+                color: '#b5691a',
               })}
-              {ViewNode('移入收藏', {
-                background: '#ffcc00',
+              {ViewNode('收藏', {
+                background: '#ffbf00',
                 color: '#FFF',
               })}
               {ViewNode('看相似', {
-                background: '#FF860D',
+                background: '#ff791a',
                 color: '#FFF',
               })}
               {ViewNode('删除', {
-                background: '#FA2C19',
+                background: '#ff0f23',
                 color: '#FFF',
               })}
             </>

src/packages/swipe/demos/taro/demo2.tsx

@@ -10,8 +10,8 @@ const ViewNode = (text: string, style: any) => {
     <View
       style={{
         display: 'flex',
-        width: pxTransform(60),
-        height: pxTransform(104),
+        width: pxTransform(56),
+        height: pxTransform(96),
         flexDirection: 'column',
         justifyContent: 'center',
         alignItems: 'center',
@@ -30,32 +30,34 @@ const App = () => {
   return (
     <>
       <Swipe
-        style={{ height: pxTransform(104) }}
+        style={{ height: pxTransform(96) }}
         rightAction={
           <View
             style={{
               display: 'flex',
               flexDirection: 'row',
-              width: pxTransform(240),
-              height: pxTransform(104),
+              width: pxTransform(224),
+              height: pxTransform(96),
               fontSize: pxTransform(12),
+              borderRadius: pxTransform(8),
+              overflow: 'hidden',
             }}
           >
             <>
-              {ViewNode('设置常买', {
-                backgroundColor: '#F8F8F8',
-                color: '#1A1A1A',
+              {ViewNode('加常买', {
+                background: '#fff4e8',
+                color: '#b5691a',
               })}
-              {ViewNode('移入收藏', {
-                backgroundColor: '#ffcc00',
+              {ViewNode('收藏', {
+                background: '#ffbf00',
                 color: '#FFF',
               })}
               {ViewNode('看相似', {
-                backgroundColor: '#FF860D',
+                background: '#ff791a',
                 color: '#FFF',
               })}
               {ViewNode('删除', {
-                backgroundColor: '#FA2C19',
+                background: '#ff0f23',
                 color: '#FFF',
               })}
             </>

src/packages/swipe/swipe.taro.tsx

@@ -9,7 +9,7 @@ import React, {
 import classNames from 'classnames'
 import { ITouchEvent, View } from '@tarojs/components'
 import { BaseEventOrig } from '@tarojs/components/types/common'
-import { useReady } from '@tarojs/taro'
+import { nextTick, useReady } from '@tarojs/taro'
 import { useTouch } from '@/hooks/use-touch'
 import { getRectByTaro } from '@/utils/get-rect-by-taro'
 import { ComponentDefaults } from '@/utils/typings'
@@ -58,7 +58,7 @@ export const Swipe = forwardRef<
           setActionWidth((v: any) => ({ ...v, right: rightRect.width }))
       }
     }
-    setTimeout(() => getWidth())
+    nextTick(() => getWidth())
   })
 
   const { children, className, style } = { ...defaultProps, ...props }