feat(Picker): add swipe-duration prop (#4816)

src/picker/PickerColumn.js

@@ -8,8 +8,7 @@ const DEFAULT_DURATION = 200;
 
 // 惯性滑动思路:
 // 在手指离开屏幕时，如果和上一次 move 时的间隔小于 `MOMENTUM_LIMIT_TIME` 且 move
-// 距离大于 `MOMENTUM_LIMIT_DISTANCE` 时，执行惯性滑动，持续 `MOMENTUM_DURATION`
-const MOMENTUM_DURATION = 1000;
+// 距离大于 `MOMENTUM_LIMIT_DISTANCE` 时，执行惯性滑动
 const MOMENTUM_LIMIT_TIME = 300;
 const MOMENTUM_LIMIT_DISTANCE = 15;
 
@@ -36,6 +35,7 @@ export default createComponent({
     className: String,
     itemHeight: Number,
     defaultIndex: Number,
+    swipeDuration: Number,
     visibleItemCount: Number,
     initialOptions: {
       type: Array,
@@ -216,7 +216,7 @@ export default createComponent({
 
       const index = this.getIndexByOffset(distance);
 
-      this.duration = MOMENTUM_DURATION;
+      this.duration = this.swipeDuration;
       this.setIndex(index, true);
     },
 

src/picker/README.md

@@ -198,6 +198,7 @@ When Picker columns data is acquired asynchronously, use `loading` prop to show
 | visible-item-count | Count of visible columns | *number* | `5` | - |
 | allow-html | Whether to allow HTML in option text | *boolean* | `true` | 2.1.8 |
 | default-index | Default value index of single column picker | *number* | `0` | - |
+| swipe-duration | Duration of the momentum animation，unit `ms` | *number*  | `1000` | `2.2.10` |
 
 ### Events
 

src/picker/README.zh-CN.md

@@ -206,6 +206,7 @@ export default {
 | visible-item-count | 可见的选项个数 | *number* | `5` | - |
 | allow-html | 是否允许选项内容中渲染 HTML | *boolean* | `true` | 2.1.8 |
 | default-index | 单列选择器的默认选中项索引，<br>多列选择器请参考下方的 Columns 配置 | *number* | `0` | - |
+| swipe-duration | 快速滑动时惯性滚动的时长，单位`ms` | *number*  | `1000` | `2.2.10` |
 
 ### Events
 

src/picker/demo/index.vue

@@ -1,18 +1,11 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-picker
-        :columns="$t('column1')"
-        @change="onChange1"
-      />
+      <van-picker :columns="$t('column1')" @change="onChange1" />
     </demo-block>
 
     <demo-block :title="$t('defaultIndex')">
-      <van-picker
-        :columns="$t('column1')"
-        :default-index="2"
-        @change="onChange1"
-      />
+      <van-picker :columns="$t('column1')" :default-index="2" @change="onChange1" />
     </demo-block>
 
     <demo-block :title="$t('title3')">
@@ -34,10 +27,7 @@
         :placeholder="$t('chooseCity')"
         @click="onClickField"
       />
-      <van-popup
-        v-model="showPicker"
-        position="bottom"
-      >
+      <van-popup v-model="showPicker" position="bottom">
         <van-picker
           show-toolbar
           :columns="$t('column1')"
@@ -52,17 +42,11 @@
     </demo-block>
 
     <demo-block :title="$t('title4')">
-      <van-picker
-        :columns="columns"
-        @change="onChange2"
-      />
+      <van-picker :columns="columns" @change="onChange2" />
     </demo-block>
 
     <demo-block :title="$t('loadingStatus')">
-      <van-picker
-        loading
-        :columns="columns"
-      />
+      <van-picker loading :columns="columns" />
     </demo-block>
   </demo-section>
 </template>
@@ -79,11 +63,7 @@ export default {
       withPopup: '搭配弹出层使用',
       chooseCity: '选择城市',
       column1: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
-      column2: [
-        { text: '杭州', disabled: true },
-        { text: '宁波' },
-        { text: '温州' }
-      ],
+      column2: [{ text: '杭州', disabled: true }, { text: '宁波' }, { text: '温州' }],
       column3: {
         浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
         福建: ['福州', '厦门', '莆田', '三明', '泉州']

src/picker/index.js

@@ -192,6 +192,7 @@ export default createComponent({
               className={item.className}
               itemHeight={this.itemHeight}
               defaultIndex={item.defaultIndex || this.defaultIndex}
+              swipeDuration={this.swipeDuration}
               visibleItemCount={this.visibleItemCount}
               initialOptions={this.simple ? item : item.values}
               onChange={() => {

src/picker/shared.ts

@@ -25,5 +25,9 @@ export const pickerProps = {
   itemHeight: {
     type: Number,
     default: 44
+  },
+  swipeDuration: {
+    type: Number,
+    default: 1000
   }
 };