fix: 解决Picker滚动结束延迟触发事件问题 (#218)

src/packages/picker/demo.tsx

@@ -325,6 +325,7 @@ const PickerDemo = () => {
           onConfirm={(values, list) => confirmPicker('tile', values, list)}
           defaultValueData={defaultValue}
           threeDimensional={false}
+          swipeDuration={1000}
           onClose={() => setIsVisible6(false)}
           onChange={changePicker}
         />

src/packages/picker/doc.md

@@ -170,7 +170,7 @@ export default App;
 
 ### 平铺展示
 
-通过设置 `threeDimensional` 取消 3D 展示效果
+通过设置 `threeDimensional` 取消 3D 展示效果，并且通过设置 `swipeDuration` 可以控制快速滚动的时长。
 
 :::demo
 ```tsx
@@ -210,6 +210,7 @@ const App = () => {
         isVisible={isVisible}
         listData={listData}
         threeDimensional={false}
+        swipeDuration={1000}
         onConfirm={(values, list) => confirmPicker(values, list)}
         onClose={() => setIsVisible(false)}
        />
@@ -370,6 +371,7 @@ export default App;
 | listData               | 列表数据 | Array | [] |
 | defaultValueData       | 默认选中 | Array | [] |
 | threeDimensional`v1.2.2` | 是否开启3D效果               | Boolean  | true   |
+| swipeDuration`v1.2.3` | 快速滑动时惯性滚动的时长，单位 ms               | String \| Number  | 1000   |
 
 
 ## listData 数据结构

src/packages/picker/picker.tsx

@@ -25,6 +25,7 @@ export interface IPickerProps {
   className?: ''
   style?: React.CSSProperties
   threeDimensional?: boolean
+  swipeDuration: number | string
   onConfirm?: (
     selectedValue: (string | number)[],
     selectedOptions: PickerOption[]
@@ -60,6 +61,7 @@ const InternalPicker: ForwardRefRenderFunction<unknown, Partial<IPickerProps>> =
       className,
       style,
       threeDimensional,
+      swipeDuration,
       ...rest
     } = props
 
@@ -272,6 +274,7 @@ const InternalPicker: ForwardRefRenderFunction<unknown, Partial<IPickerProps>> =
                   chooseItem={(value: PickerOption, index: number) =>
                     chooseItem(value, index)
                   }
+                  swipeDuration={swipeDuration}
                   key={index}
                   keyIndex={index}
                 />

src/packages/picker/pickerSlot.tsx

@@ -12,6 +12,7 @@ interface IPickerSlotProps {
   defaultValue?: string | number
   listData?: PickerOption[]
   threeDimensional: boolean
+  swipeDuration: number | string
   chooseItem?: (val: PickerOption, idx: number) => void
 }
 
@@ -24,10 +25,13 @@ const InternalPickerSlot: ForwardRefRenderFunction<
     defaultValue,
     listData = [],
     threeDimensional = true,
+    swipeDuration = 1000,
     chooseItem,
   } = props
 
   const touch = useTouch()
+
+  const DEFAULT_DURATION = 200
   // 触发惯性滑动条件:
   // 在手指离开屏幕时，如果和上一次 move 时的间隔小于 `MOMENTUM_TIME` 且 move
   // 距离大于 `MOMENTUM_DISTANCE` 时，执行惯性滑动
@@ -58,17 +62,13 @@ const InternalPickerSlot: ForwardRefRenderFunction<
   const setTransform = (
     translateY = 0,
     type: string,
-    time = 1000,
+    time = DEFAULT_DURATION,
     deg: string
   ) => {
     let nTime = time
     if (type !== 'end') {
       nTime = 0
     }
-    if (threeDimensional) {
-      // listRef.current.style.webkitTransition = `transform ${nTime}ms cubic-bezier(0.17, 0.89, 0.45, 1)`
-      // listRef.current.style.webkitTransform = `translate3d(0, ${translateY}px, 0)`
-    }
 
     if (threeDimensional) {
       rollerRef.current.style.webkitTransform = `rotate3d(1, 0, 0, ${deg})`
@@ -147,7 +147,7 @@ const InternalPickerSlot: ForwardRefRenderFunction<
     if (moveTime <= INERTIA_TIME && Math.abs(move) > INERTIA_DISTANCE) {
       // 惯性滚动
       const distance = momentum(move, moveTime)
-      setMove(distance, 'end', moveTime + 1000)
+      setMove(distance, 'end', +swipeDuration)
     } else {
       setMove(move, 'end')
     }