feat: picker添加惯性滚动

src/packages/picker/picker-slot.vue

@@ -29,19 +29,23 @@ export default {
   props: {
     listData: {
       type: Array,
-      required: true
+      required: true,
     },
     defaultValue: {
-      type: String | Number
+      type: String | Number,
     },
     keyIndex: {
       type: Number,
-      default: 0
+      default: 0,
     },
     isUpdate: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
+    swipeDuration: {
+      type: Number | String,
+      default: '1000',
+    },
   },
   data() {
     return {
@@ -49,25 +53,25 @@ export default {
         startY: 0,
         endY: 0,
         startTime: 0,
-        endTime: 0
+        endTime: 0,
       },
       currIndex: 1,
       transformY: 0,
       scrollDistance: 0,
       lineSpacing: 36,
       rotation: 20,
-      timer: null
+      timer: null,
     };
   },
   watch: {
-    isUpdate: function() {
+    isUpdate: function () {
       this.transformY = 0;
       this.modifyStatus();
     },
-    defaultValue: function() {
+    defaultValue: function () {
       this.transformY = 0;
       this.modifyStatus();
-    }
+    },
   },
   methods: {
     updateTransform(value) {
@@ -172,8 +176,7 @@ export default {
       let moveTime = this.touchParams.lastTime - this.touchParams.startTime;
       if (moveTime <= 300) {
         move = move * 2;
-        moveTime = moveTime + 1000;
-        this.setMove(move, 'end', moveTime);
+        this.setMove(move, 'end', +this.swipeDuration);
       } else {
         this.setMove(move, 'end');
       }
@@ -196,7 +199,7 @@ export default {
       let move = index === -1 ? 0 : index * this.lineSpacing;
       type && this.setChooseValue(-move);
       this.setMove(-move);
-    }
+    },
   },
 
   mounted() {
@@ -214,6 +217,6 @@ export default {
     this.$el.removeEventListener('touchmove', this.touchMove);
     this.$el.removeEventListener('touchend', this.touchEnd);
     clearTimeout(this.timer);
-  }
+  },
 };
 </script>

src/packages/picker/picker.vue

@@ -16,6 +16,7 @@
             @chooseItem="chooseItem"
             :key="index"
             :key-index="index"
+            :swipe-duration="swipeDuration"
           ></nut-picker-slot>
         </template>
       </div>
@@ -33,45 +34,49 @@ export default {
   props: {
     isVisible: {
       type: Boolean,
-      default: false
+      default: false,
     },
     customClassName: {
       type: String,
-      default: null
+      default: null,
     },
     title: {
       type: String,
-      default: ' '
+      default: ' ',
     },
     listData: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     defaultValueData: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
+    swipeDuration: {
+      type: Number | String,
+      default: '1000',
+    },
   },
   components: {
     [nutactionsheet.name]: nutactionsheet,
-    [nutpickerslot.name]: nutpickerslot
+    [nutpickerslot.name]: nutpickerslot,
   },
   data() {
     return {
       chooseValueData: [],
       cacheValueData: [],
-      isUpdate: false
+      isUpdate: false,
     };
   },
   watch: {
-    defaultValueData: function() {
+    defaultValueData: function () {
       this.chooseValueData = [...this.defaultValueData];
       this.cacheValueData = [...this.defaultValueData];
       this.$emit('confirm', this.cacheValueData);
     },
-    listData: function() {
+    listData: function () {
       this.init();
-    }
+    },
   },
   methods: {
     updateChooseValue(self, index, value) {
@@ -108,11 +113,11 @@ export default {
         });
         this.chooseValueData = [...defaultValueData];
       }
-    }
+    },
   },
 
   created() {
     this.init();
-  }
+  },
 };
 </script>