diff --git a/src/image-preview/ImagePreview.js b/src/image-preview/ImagePreview.js
index 2cfda607d..cce3443a4 100644
--- a/src/image-preview/ImagePreview.js
+++ b/src/image-preview/ImagePreview.js
@@ -405,6 +405,14 @@ export default createComponent({
onClosed() {
this.$emit('closed');
},
+
+ // @exposed-api
+ swipeTo(index, options) {
+ if (!this.$refs.swipe) {
+ return;
+ }
+ this.$refs.swipe.swipeTo(+index, options);
+ },
},
render() {
diff --git a/src/image-preview/README.md b/src/image-preview/README.md
index f9679ef7d..3ccfdf6a5 100644
--- a/src/image-preview/README.md
+++ b/src/image-preview/README.md
@@ -147,6 +147,7 @@ export default {
| closed `v2.5.6` | Triggered after closed | - |
| change | Triggered when current image change | index: index of current image |
| scale `v2.5.0` | Triggered when current image scale | { index: index of current image, scale: scale of current image} |
+| swipeTo `2.9.0` | Swipe to target index | index: target index, options: Options | void |
### Slots
diff --git a/src/image-preview/README.zh-CN.md b/src/image-preview/README.zh-CN.md
index 9a1777eb0..ed1ba9ce3 100644
--- a/src/image-preview/README.zh-CN.md
+++ b/src/image-preview/README.zh-CN.md
@@ -185,6 +185,7 @@ export default {
| closed `v2.5.6` | 关闭且且动画结束后触发 | - |
| change | 切换当前图片时触发 | index: 当前图片的索引 |
| scale `v2.5.0` | 缩放当前图片时触发 | { index: 当前图片的索引, scale: 当前缩放的值 } |
+| swipeTo `2.9.0` | 切换到指定位置 | index: number, options: Options | void |
### Slots
diff --git a/src/image-preview/demo/index.vue b/src/image-preview/demo/index.vue
index ec4960fdb..23bbf26ff 100644
--- a/src/image-preview/demo/index.vue
+++ b/src/image-preview/demo/index.vue
@@ -32,6 +32,27 @@
{{ t('index', index) }}
+
+
+
+ {{ t('swipeToPosition') }}
+
+
+
+
+
{{ t('index', index) }}
+
+ {{ t('swipeToThird') }}
+
+
+
+
+
@@ -53,6 +74,8 @@ export default {
button3: '异步关闭',
button4: '展示关闭按钮',
componentCall: '组件调用',
+ swipeToPosition: '指定滑动位置',
+ swipeToThird: '前往第三页',
index: (index) => `第${index + 1}页`,
},
'en-US': {
@@ -61,6 +84,8 @@ export default {
button3: 'Async Close',
button4: 'Show Close Icon',
componentCall: 'Component Call',
+ swipeToPosition: 'swipe to position',
+ swipeToThird: 'swipe to third page',
index: (index) => `Page: ${index}`,
},
},
@@ -68,6 +93,7 @@ export default {
data() {
return {
show: false,
+ showPage: false,
images,
index: 0,
};
@@ -78,6 +104,10 @@ export default {
this.show = true;
},
+ componentPage() {
+ this.showPage = true;
+ },
+
onChange(index) {
this.index = index;
},
@@ -98,6 +128,9 @@ export default {
}, timer);
}
},
+ swipeToSecond() {
+ this.$refs.imagePreview.swipeTo(2);
+ },
},
};
@@ -111,5 +144,15 @@ export default {
.van-button {
margin-left: @padding-md;
}
+
+ .block {
+ flex: 1;
+ text-align: center;
+
+ &__wrap {
+ display: flex;
+ width: 300px;
+ }
+ }
}
diff --git a/src/image-preview/test/index.spec.js b/src/image-preview/test/index.spec.js
index c99b22bfd..6fe3c5125 100644
--- a/src/image-preview/test/index.spec.js
+++ b/src/image-preview/test/index.spec.js
@@ -309,3 +309,24 @@ test('get container with component call', () => {
wrapper.vm.getContainer = null;
expect(wrapper.element).toEqual(wrapper.element);
});
+
+test('swipeTo method', async () => {
+ const wrapper = mount({
+ template: `
+
+
+
+
+ `,
+ data() {
+ return {
+ images,
+ };
+ },
+ });
+ const { imagePreview } = wrapper.vm.$refs;
+ imagePreview.swipeTo(2);
+
+ await later(100);
+ expect(imagePreview.active).toEqual(2);
+});
diff --git a/types/image-preview.d.ts b/types/image-preview.d.ts
index 03acd4658..4792825b0 100644
--- a/types/image-preview.d.ts
+++ b/types/image-preview.d.ts
@@ -1,5 +1,6 @@
import { VanComponent } from './component';
import { VanPopupMixin } from './mixins/popup';
+import { SwipeToOptions } from './swipe';
export type ImagePreviewOptions =
| string[]
@@ -21,6 +22,7 @@ export type ImagePreviewOptions =
getContainer?: string | (() => Element);
onClose?: () => void;
onChange?: (index: number) => void;
+ swipeTo(index: number, options?: SwipeToOptions): void;
};
export class VanImagePreview extends VanPopupMixin {