fix: picker 解决惯性滚动问题 (#1546)

src/packages/__VUE/picker/Column.vue

@@ -57,6 +57,10 @@ export default create({
     threeDimensional: {
       type: Boolean,
       default: true
+    },
+    swipeDuration: {
+      type: [Number, String],
+      default: 1000
     }
   },
 
@@ -90,6 +94,8 @@ export default create({
     const touchDeg = ref(0);
     const touchTime = ref(0);
 
+    const DEFAULT_DURATION = 200;
+
     // 触发惯性滑动条件:
     // 在手指离开屏幕时，如果和上一次 move 时的间隔小于 `MOMENTUM_TIME` 且 move
     // 距离大于 `MOMENTUM_DISTANCE` 时，执行惯性滑动
@@ -161,7 +167,7 @@ export default create({
       if (moveTime <= INERTIA_TIME && Math.abs(move) > INERTIA_DISTANCE) {
         // 惯性滚动
         const distance = momentum(move, moveTime);
-        setMove(distance, 'end', moveTime + 1000);
+        setMove(distance, 'end', +props.swipeDuration);
         return;
       } else {
         setMove(move, 'end');
@@ -190,7 +196,7 @@ export default create({
       }
     };
 
-    const setTransform = (translateY = 0, type: string | null, time = 1000, deg: string | number) => {
+    const setTransform = (translateY = 0, type: string | null, time = DEFAULT_DURATION, deg: string | number) => {
       if (type === 'end') {
         touchTime.value = time;
       } else {
@@ -269,7 +275,6 @@ export default create({
     // 惯性滚动结束
     const stopMomentum = () => {
       moving.value = false;
-
       setChooseValue();
     };
 

src/packages/__VUE/picker/ColumnTaro.vue

@@ -59,6 +59,11 @@ export default create({
     threeDimensional: {
       type: Boolean,
       default: true
+    },
+    // 惯性滚动 时长
+    swipeDuration: {
+      type: [Number, String],
+      default: 1000
     }
   },
 
@@ -94,6 +99,8 @@ export default create({
     const touchTime = ref(0);
     const touchTranslateY = ref(0);
 
+    const DEFAULT_DURATION = 200;
+
     // 触发惯性滑动条件:
     // 在手指离开屏幕时，如果和上一次 move 时的间隔小于 `MOMENTUM_TIME` 且 move
     // 距离大于 `MOMENTUM_DISTANCE` 时，执行惯性滑动
@@ -164,7 +171,7 @@ export default create({
       if (moveTime <= INERTIA_TIME && Math.abs(move) > INERTIA_DISTANCE) {
         // 惯性滚动
         const distance = momentum(move, moveTime);
-        setMove(distance, 'end', moveTime + 1000);
+        setMove(distance, 'end', +props.swipeDuration);
         return;
       } else {
         setMove(move, 'end');
@@ -193,7 +200,7 @@ export default create({
       }
     };
 
-    const setTransform = (translateY = 0, type: string | null, time = 1000, deg: string | number) => {
+    const setTransform = (translateY = 0, type: string | null, time = DEFAULT_DURATION, deg: string | number) => {
       if (type === 'end') {
         touchTime.value = time;
       } else {

src/packages/__VUE/picker/doc.en-US.md

@@ -428,6 +428,7 @@ Slots are arranged at the bottom and top respectively for custom Settings
 | cancel-text            | Text of cancel button               | String  | cancel   |
 | ok-text                | Text of confirm button               | String  | confirm   |
 | three-dimensional `v3.1.23`          | Turn on 3D effects      | Boolean  | true   |
+| swipe-duration`v3.2.2`          | Duration of the momentum animation        | Number、String  | 1000   |
 
 ### Data Structure of Columns
 

src/packages/__VUE/picker/doc.md

@@ -432,6 +432,7 @@ Picker 组件在底部和顶部分别设置了插槽，可进行自定义设置
 | cancel-text            | 取消按钮文案               | String  | 取消   |
 | ok-text                | 确定按钮文案               | String  | 确定   |
 | three-dimensional`v3.1.23`          | 是否开启3D效果               | Boolean  | true   |
+| swipe-duration`v3.2.2`          | 惯性滚动时长        | Number、String  | 1000   |
 
 ### Columns 数据结构
 

src/packages/__VUE/picker/index.taro.vue

@@ -29,6 +29,7 @@
             :columnsType="columnsType"
             :value="defaultValues[columnIndex]"
             :threeDimensional="threeDimensional"
+            :swipeDuration="swipeDuration"
             @change="
               (option) => {
                 changeHandler(columnIndex, option);
@@ -83,6 +84,11 @@ export default create({
     threeDimensional: {
       type: Boolean,
       default: true
+    },
+    // 惯性滚动 时长
+    swipeDuration: {
+      type: [Number, String],
+      default: 1000
     }
   },
   emits: ['close', 'change', 'confirm', 'update:visible', 'update:modelValue'],

src/packages/__VUE/picker/index.vue

@@ -32,6 +32,7 @@
             :columnsType="columnsType"
             :value="defaultValues[columnIndex]"
             :threeDimensional="threeDimensional"
+            :swipeDuration="swipeDuration"
             @change="
               (option) => {
                 changeHandler(columnIndex, option);
@@ -98,6 +99,11 @@ export default create({
     threeDimensional: {
       type: Boolean,
       default: true
+    },
+    // 惯性滚动 时长
+    swipeDuration: {
+      type: [Number, String],
+      default: 1000
     }
   },
   emits: ['close', 'change', 'confirm', 'update:visible', 'update:modelValue'],