diff --git a/packages/card/index.js b/packages/card/index.js
index dc8030517..989382e4e 100644
--- a/packages/card/index.js
+++ b/packages/card/index.js
@@ -9,7 +9,6 @@ export default sfc({
desc: String,
thumb: String,
title: String,
- centered: Boolean,
lazyLoad: Boolean,
thumbLink: String,
num: [Number, String],
diff --git a/packages/image-preview/ImagePreview.js b/packages/image-preview/ImagePreview.js
index 69f3decf1..79b78e6e5 100644
--- a/packages/image-preview/ImagePreview.js
+++ b/packages/image-preview/ImagePreview.js
@@ -10,10 +10,7 @@ const MIN_ZOOM = 1 / 3;
function getDistance(touches) {
return Math.sqrt(
- Math.abs(
- (touches[0].clientX - touches[1].clientX) *
- (touches[0].clientY - touches[1].clientY)
- )
+ Math.abs((touches[0].clientX - touches[1].clientX) * (touches[0].clientY - touches[1].clientY))
);
}
@@ -22,6 +19,7 @@ export default sfc({
props: {
images: Array,
+ lazyLoad: Boolean,
asyncClose: Boolean,
startPosition: Number,
showIndicators: Boolean,
@@ -67,8 +65,8 @@ export default sfc({
};
if (scale !== 1) {
- style.transform = `scale3d(${scale}, ${scale}, 1) translate(${this
- .moveX / scale}px, ${this.moveY / scale}px)`;
+ style.transform = `scale3d(${scale}, ${scale}, 1) translate(${this.moveX / scale}px, ${this
+ .moveY / scale}px)`;
}
return style;
@@ -171,11 +169,7 @@ export default sfc({
if (this.moving || this.zooming) {
let stopPropagation = true;
- if (
- this.moving &&
- this.startMoveX === this.moveX &&
- this.startMoveY === this.moveY
- ) {
+ if (this.moving && this.startMoveX === this.moveX && this.startMoveY === this.moveY) {
stopPropagation = false;
}
@@ -230,19 +224,23 @@ export default sfc({
show-indicators={this.showIndicators}
onChange={this.onChange}
>
- {images.map((item, index) => (
-
-
-
- ))}
+ {images.map((image, index) => {
+ const props = {
+ class: bem('image'),
+ style: index === active ? this.imageStyle : null,
+ on: {
+ touchstart: this.onTouchStart,
+ touchmove: this.onTouchMove,
+ touchend: this.onTouchEnd,
+ touchcancel: this.onTouchEnd
+ }
+ };
+ return (
+
+ {this.lazyLoad ?
:
}
+
+ );
+ })}
);
diff --git a/packages/image-preview/en-US.md b/packages/image-preview/en-US.md
index 846f6f74e..97b67bae1 100644
--- a/packages/image-preview/en-US.md
+++ b/packages/image-preview/en-US.md
@@ -60,6 +60,7 @@ setTimeout(() => {
| onClose | Close callback | `Function` | - |
| asyncClose | Whether to enable async close | `Boolean` | `false` |
| className | Custom className | `String | Array | Object` | - |
+| lazyLoad | Whether to enable thumb lazy load,should register [Lazyload](#/en-US/lazyload) component | `Boolean` | `false` |
### onClose Parematers
diff --git a/packages/image-preview/index.js b/packages/image-preview/index.js
index 74a1ddddd..9625a717e 100644
--- a/packages/image-preview/index.js
+++ b/packages/image-preview/index.js
@@ -9,6 +9,7 @@ const defaultConfig = {
loop: true,
value: true,
className: '',
+ lazyLoad: false,
showIndex: true,
asyncClose: false,
startPosition: 0,
diff --git a/packages/image-preview/zh-CN.md b/packages/image-preview/zh-CN.md
index 99e82a167..59f8b306c 100644
--- a/packages/image-preview/zh-CN.md
+++ b/packages/image-preview/zh-CN.md
@@ -68,6 +68,7 @@ setTimeout(() => {
| onClose | 关闭时的回调函数 | `Function` | - | 1.1.16 |
| asyncClose | 是否开启异步关闭 | `Boolean` | `false` | 1.4.8 |
| className | 自定义类名 | `String | Array | Object` | - | 1.5.2 |
+| lazyLoad | 是否开启图片懒加载,须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | `Boolean` | `false` | 1.5.3 |
### onClose 回调参数
diff --git a/types/image-preview.d.ts b/types/image-preview.d.ts
index e64465589..9a08f05c6 100644
--- a/types/image-preview.d.ts
+++ b/types/image-preview.d.ts
@@ -5,6 +5,7 @@ export type ImagePreviewOptions = string[] | {
images: string[];
className?: any;
startPosition?: number;
+ lazyLoad?: boolean;
showIndex?: boolean;
asyncClose?: boolean;
showIndicators?: boolean;