ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-19 10:07:07 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[new feature] ImagePreview: add lazyLoad prop (#2569)

Browse Source
This commit is contained in:
neverland
2019-01-20 13:35:15 +08:00
committed by GitHub
parent e45780dccc
commit 8bc8e99f74
6 changed files with 26 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
packages/image-preview/ImagePreview.js
View File

@@ -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) => (
<SwipeItem>
<img
class={bem('image')}
src={item}
style={index === active ? this.imageStyle : null}
onTouchstart={this.onTouchStart}
onTouchmove={this.onTouchMove}
onTouchend={this.onTouchEnd}
onTouchcancel={this.onTouchEnd}
/>
</SwipeItem>
))}
{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 (
<SwipeItem>
{this.lazyLoad ? <img v-lazy={image} {...props} /> : <img src={image} {...props} />}
</SwipeItem>
);
})}
</Swipe>
);