[new feature] ImagePreview: add swipe-duration prop (#3963)

src/image-preview/ImagePreview.js

@@ -38,6 +38,10 @@ export default createComponent({
       type: Boolean,
       default: true
     },
+    swipeDuration: {
+      type: Number,
+      default: 500
+    },
     overlay: {
       type: Boolean,
       default: true
@@ -267,6 +271,7 @@ export default createComponent({
       <Swipe
         ref="swipe"
         loop={this.loop}
+        duration={this.swipeDuration}
         indicatorColor="white"
         initialSwipe={this.startPosition}
         showIndicators={this.showIndicators}

src/image-preview/README.md

@@ -94,6 +94,7 @@ export default {
 | showIndex | Whether to show index | `boolean` | `true` |
 | showIndicators | Whether to show indicators | `boolean` | `false` |
 | loop | Whether to enable loop | `boolean` | `true` |
+| swipeDuration | Animation duration (ms) | `number` | `500` |
 | onClose | Triggered when close | `Function` | - |
 | onChange | Triggered when current image change | `Function` | - |
 | closeOnPopstate | Whether to close when popstate | `boolean` | `false` |
@@ -112,6 +113,7 @@ export default {
 | show-index | Whether to show index | `boolean` | `true` |
 | show-indicators | Whether to show indicators | `boolean` | `false` |
 | loop | Whether to enable loop | `boolean` | `true` |
+| swipe-duration | Animation duration (ms) | `number` | `500` |
 | async-close | Whether to enable async close | `boolean` | `false` |
 | close-on-popstate | Whether to close when popstate | `boolean` | `false` |
 | class-name | Custom className | `any` | - |

src/image-preview/README.zh-CN.md

@@ -106,6 +106,7 @@ export default {
 | showIndex | 是否显示页码 | `boolean` | `true` | - |
 | showIndicators | 是否显示轮播指示器 | `boolean` | `false` | - |
 | loop | 是否开启循环播放 | `boolean` | `true` | - |
+| swipeDuration | 动画时长，单位为 ms | `number` | `500` | - |
 | onClose | 关闭时的回调函数 | `Function` | - | - |
 | onChange | 切换图片时的回调函数，回调参数为当前索引 | `Function` | - | 2.0.3 |
 | asyncClose | 是否开启异步关闭 | `boolean` | `false` | - |
@@ -126,6 +127,7 @@ export default {
 | show-index | 是否显示页码 | `boolean` | `true` | 1.3.4 |
 | show-indicators | 是否显示轮播指示器 | `boolean` | `false` | 1.3.10 |
 | loop | 是否开启循环播放 | `boolean` | `true` | 1.4.4 |
+| swipe-duration | 动画时长，单位为 ms | `number` | `500` | - |
 | async-close | 是否开启异步关闭 | `boolean` | `false` | 1.4.8 |
 | close-on-popstate | 是否在页面回退时自动关闭 | `boolean` | `false` |
 | class-name | 自定义类名 | `any` | - | 1.5.2 |

src/image-preview/demo/index.vue

@@ -37,6 +37,7 @@
       <van-image-preview
         v-model="show"
         :images="images"
+        :swipe-duration="300"
         @change="onChange"
       >
         <template #index>{{ $t('index', index) }}</template>
@@ -93,6 +94,7 @@ export default {
     showImagePreview(position, timer) {
       const instance = ImagePreview({
         images,
+        swipeDuration: 300,
         asyncClose: !!timer,
         closeOnPopstate: true,
         startPosition: typeof position === 'number' ? position : 0

src/image-preview/index.js

@@ -7,6 +7,7 @@ let instance;
 const defaultConfig = {
   images: [],
   loop: true,
+  swipeDuration: 500,
   value: true,
   minZoom: 1 / 3,
   maxZoom: 3,