diff --git a/docs/examples-docs/zh-CN/image-preview.md b/docs/examples-docs/zh-CN/image-preview.md
index 60cb65550..bc16e3fa4 100644
--- a/docs/examples-docs/zh-CN/image-preview.md
+++ b/docs/examples-docs/zh-CN/image-preview.md
@@ -16,12 +16,12 @@ import { ImagePreview } from 'packages';
export default {
methods: {
- showImagePreview() {
+ showImagePreview(position) {
ImagePreview([
'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
- ]);
+ ], typeof position === 'number' ? position : 0);
}
}
};
@@ -60,8 +60,30 @@ export default {
```
:::
+#### 指定初始位置
+
+:::demo 指定初始位置
+```html
+指定初始位置
+```
+
+```javascript
+export default {
+ methods: {
+ showImagePreview(startPosition) {
+ ImagePreview([
+ 'https://img.yzcdn.cn/1.jpg',
+ 'https://img.yzcdn.cn/2.jpg'
+ ], startPosition);
+ }
+ }
+};
+```
+:::
+
### 方法参数
| 参数名 | 说明 | 类型 |
|-----------|-----------|-----------|
| imageUrls | 需要预览的图片 | `Array` |
+| startPosition | 图片预览起始位置索引 | `Number` |
diff --git a/packages/image-preview/image-preview.vue b/packages/image-preview/image-preview.vue
index ea0f8e084..46434e058 100644
--- a/packages/image-preview/image-preview.vue
+++ b/packages/image-preview/image-preview.vue
@@ -7,7 +7,7 @@
@touchend="onTouchEnd"
@touchcancel="onTouchEnd"
>
-
+
@@ -44,7 +44,8 @@ export default {
data() {
return {
- images: []
+ images: [],
+ startPosition: 0
};
},
@@ -63,7 +64,8 @@ export default {
this.deltaY = event.touches[0].clientY - this.touchStartY;
},
- onTouchEnd() {
+ onTouchEnd(event) {
+ event.preventDefault();
// prevent long tap to close component
const deltaTime = new Date() - this.touchStartTime;
if (deltaTime < 100 && Math.abs(this.deltaX) < 20 && Math.abs(this.deltaY) < 20) {
diff --git a/packages/image-preview/index.js b/packages/image-preview/index.js
index 095ed6788..59c56d841 100644
--- a/packages/image-preview/index.js
+++ b/packages/image-preview/index.js
@@ -12,12 +12,13 @@ const initInstance = () => {
document.body.appendChild(instance.$el);
};
-const ImagePreviewBox = images => {
+const ImagePreviewBox = (images, startPosition = 0) => {
if (!instance) {
initInstance();
}
instance.images = images;
+ instance.startPosition = startPosition;
instance.value = true;
};
diff --git a/packages/swipe/index.vue b/packages/swipe/index.vue
index f0af6ec74..760887a86 100644
--- a/packages/swipe/index.vue
+++ b/packages/swipe/index.vue
@@ -69,6 +69,10 @@ export default {
watch: {
swipes() {
this.initialize();
+ },
+
+ initialSwipe() {
+ this.initialize();
}
},
diff --git a/test/unit/specs/image-preview.spec.js b/test/unit/specs/image-preview.spec.js
index f2b1ffc30..1177d544c 100644
--- a/test/unit/specs/image-preview.spec.js
+++ b/test/unit/specs/image-preview.spec.js
@@ -21,7 +21,12 @@ describe('ImagePreview', () => {
ImagePreview(images);
Vue.nextTick(() => {
expect(document.querySelectorAll('.van-image-preview img').length).to.equal(3);
- done();
+ ImagePreview(images.slice(0, 2));
+
+ Vue.nextTick(() => {
+ expect(document.querySelectorAll('.van-image-preview img').length).to.equal(2);
+ done();
+ });
});
});