blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

refactor(Swipe): use flex layout

Browse Source
This commit is contained in:
chenjiahan 2020-03-22 07:48:16 +08:00
parent 3bd9ef1d4c
commit f701de9e58
6 changed files with 66 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/image-preview/test/__snapshots__/index.spec.js.snap
View File

@ -43,21 +43,21 @@ exports[`lazy-load prop 1`] = `
<div class="van-image-preview" name="van-fade">
<div class="van-swipe van-image-preview__swipe">
<div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);">
<div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);">
<div class="van-swipe-item" style="width: 0px;">
<div class="van-image van-image-preview__image" style="transition-duration: .3s;"><img class="van-image__img" style="object-fit: contain;">
<div class="van-image__loading">
<div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
</div>
</div>
</div>
<div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);">
<div class="van-swipe-item" style="width: 0px;">
<div class="van-image van-image-preview__image"><img class="van-image__img" style="object-fit: contain;">
<div class="van-image__loading">
<div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
</div>
</div>
</div>
<div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);">
<div class="van-swipe-item" style="width: 0px;">
<div class="van-image van-image-preview__image"><img class="van-image__img" style="object-fit: contain;">
<div class="van-image__loading">
<div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
@ -74,21 +74,21 @@ exports[`render image 1`] = `
<div class="van-image-preview" name="van-fade">
<div class="van-swipe van-image-preview__swipe">
<div class="van-swipe__track" style="width: 0px; transition-duration: 500ms; transform: translateX(0px);">
<div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);">
<div class="van-swipe-item" style="width: 0px;">
<div class="van-image van-image-preview__image" style="transition-duration: .3s;"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;">
<div class="van-image__loading">
<div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
</div>
</div>
</div>
<div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);">
<div class="van-swipe-item" style="width: 0px;">
<div class="van-image van-image-preview__image"><img src="https://img.yzcdn.cn/2.png" class="van-image__img" style="object-fit: contain;">
<div class="van-image__loading">
<div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
</div>
</div>
</div>
<div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);">
<div class="van-swipe-item" style="width: 0px;">
<div class="van-image van-image-preview__image"><img src="https://img.yzcdn.cn/3.png" class="van-image__img" style="object-fit: contain;">
<div class="van-image__loading">
<div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
@ -113,21 +113,21 @@ exports[`zoom 1`] = `
<div class="van-image-preview" name="van-fade">
<div class="van-swipe van-image-preview__swipe">
<div class="van-swipe__track" style="width: 300px; transition-duration: 0ms; transform: translateX(0px);">
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">
<div class="van-swipe-item" style="width: 100px;">
<div class="van-image van-image-preview__image" style="transition-duration: 0s; transform: scale3d(2, 2, 1) translate(0px, NaNpx);"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;">
<div class="van-image__loading">
<div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
</div>
</div>
</div>
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">
<div class="van-swipe-item" style="width: 100px;">
<div class="van-image van-image-preview__image"><img src="https://img.yzcdn.cn/2.png" class="van-image__img" style="object-fit: contain;">
<div class="van-image__loading">
<div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
</div>
</div>
</div>
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">
<div class="van-swipe-item" style="width: 100px;">
<div class="van-image van-image-preview__image"><img src="https://img.yzcdn.cn/3.png" class="van-image__img" style="object-fit: contain;">
<div class="van-image__loading">
<div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>

29
src/swipe-item/index.js
View File

@ -12,17 +12,28 @@ export default createComponent({
};
},
computed: {
style() {
const style = {};
const { vertical, computedWidth, computedHeight } = this.parent;
if (vertical) {
style.height = `${computedHeight}px`;
} else {
style.width = `${computedWidth}px`;
}
if (this.offset) {
style.transform = `translate${vertical ? 'Y' : 'X'}(${this.offset}px)`;
}
return style;
},
},
render() {
const { vertical, computedWidth, computedHeight } = this.parent;
const style = {
width: computedWidth + 'px',
height: vertical ? computedHeight + 'px' : '100%',
transform: `translate${vertical ? 'Y' : 'X'}(${this.offset}px)`,
};
return (
<div class={bem()} style={style} {...{ on: this.$listeners }}>
<div class={bem()} style={this.style} {...{ on: this.$listeners }}>
{this.slots()}
</div>
);

3
src/swipe-item/index.less
View File

@ -1,6 +1,7 @@
@import '../style/var';
.van-swipe-item {
float: left;
flex-shrink: 0;
width: 100%;
height: 100%;
}

6
src/swipe/index.js
View File

@ -382,7 +382,11 @@ export default createComponent({
render() {
return (
<div class={bem()}>
<div ref="track" style={this.trackStyle} class={bem('track')}>
<div
ref="track"
style={this.trackStyle}
class={bem('track', { vertical: this.vertical })}
>
{this.slots()}
</div>
{this.genIndicator()}

5
src/swipe/index.less
View File

@ -7,7 +7,12 @@
user-select: none;
&__track {
display: flex;
height: 100%;
&--vertical {
flex-direction: column;
}
}
&__indicators {

50
src/swipe/test/__snapshots__/demo.spec.js.snap
View File

@ -5,10 +5,10 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-swipe">
<div class="van-swipe__track" style="width: 400px; transition-duration: 0ms; transform: translateX(0px);">
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">1</div>
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">2</div>
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">3</div>
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">4</div>
<div class="van-swipe-item" style="width: 100px;">1</div>
<div class="van-swipe-item" style="width: 100px;">2</div>
<div class="van-swipe-item" style="width: 100px;">3</div>
<div class="van-swipe-item" style="width: 100px;">4</div>
</div>
<div class="van-swipe__indicators"><i class="van-swipe__indicator van-swipe__indicator--active" style="background-color: white;"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i></div>
</div>
@ -16,10 +16,10 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-swipe">
<div class="van-swipe__track" style="width: 400px; transition-duration: 0ms; transform: translateX(0px);">
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);"><img data-src="https://img.yzcdn.cn/vant/apple-1.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);"><img data-src="https://img.yzcdn.cn/vant/apple-2.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);"><img data-src="https://img.yzcdn.cn/vant/apple-3.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);"><img data-src="https://img.yzcdn.cn/vant/apple-4.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
<div class="van-swipe-item" style="width: 100px;"><img data-src="https://img.yzcdn.cn/vant/apple-1.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
<div class="van-swipe-item" style="width: 100px;"><img data-src="https://img.yzcdn.cn/vant/apple-2.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
<div class="van-swipe-item" style="width: 100px;"><img data-src="https://img.yzcdn.cn/vant/apple-3.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
<div class="van-swipe-item" style="width: 100px;"><img data-src="https://img.yzcdn.cn/vant/apple-4.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
</div>
<div class="van-swipe__indicators"><i class="van-swipe__indicator van-swipe__indicator--active"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i></div>
</div>
@ -27,21 +27,21 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-swipe">
<div class="van-swipe__track" style="width: 400px; transition-duration: 0ms; transform: translateX(0px);">
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">1</div>
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">2</div>
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">3</div>
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">4</div>
<div class="van-swipe-item" style="width: 100px;">1</div>
<div class="van-swipe-item" style="width: 100px;">2</div>
<div class="van-swipe-item" style="width: 100px;">3</div>
<div class="van-swipe-item" style="width: 100px;">4</div>
</div>
<div class="van-swipe__indicators"><i class="van-swipe__indicator van-swipe__indicator--active" style="background-color: white;"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i></div>
</div>
</div>
<div>
<div class="demo-swipe--vertical van-swipe" style="height: 200px;">
<div class="van-swipe__track" style="height: 400px; transition-duration: 0ms; transform: translateY(0px);">
<div class="van-swipe-item" style="width: 100px; height: 100px; transform: translateY(0px);">1</div>
<div class="van-swipe-item" style="width: 100px; height: 100px; transform: translateY(0px);">2</div>
<div class="van-swipe-item" style="width: 100px; height: 100px; transform: translateY(0px);">3</div>
<div class="van-swipe-item" style="width: 100px; height: 100px; transform: translateY(0px);">4</div>
<div class="van-swipe__track van-swipe__track--vertical" style="height: 400px; transition-duration: 0ms; transform: translateY(0px);">
<div class="van-swipe-item" style="height: 100px;">1</div>
<div class="van-swipe-item" style="height: 100px;">2</div>
<div class="van-swipe-item" style="height: 100px;">3</div>
<div class="van-swipe-item" style="height: 100px;">4</div>
</div>
<div class="van-swipe__indicators van-swipe__indicators--vertical"><i class="van-swipe__indicator van-swipe__indicator--active" style="background-color: white;"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i></div>
</div>
@ -49,10 +49,10 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-swipe">
<div class="van-swipe__track" style="width: 1200px; transition-duration: 0ms; transform: translateX(0px);">
<div class="van-swipe-item" style="width: 300px; height: 100%; transform: translateX(0px);">1</div>
<div class="van-swipe-item" style="width: 300px; height: 100%; transform: translateX(0px);">2</div>
<div class="van-swipe-item" style="width: 300px; height: 100%; transform: translateX(0px);">3</div>
<div class="van-swipe-item" style="width: 300px; height: 100%; transform: translateX(0px);">4</div>
<div class="van-swipe-item" style="width: 300px;">1</div>
<div class="van-swipe-item" style="width: 300px;">2</div>
<div class="van-swipe-item" style="width: 300px;">3</div>
<div class="van-swipe-item" style="width: 300px;">4</div>
</div>
<div class="van-swipe__indicators"><i class="van-swipe__indicator van-swipe__indicator--active" style="background-color: white;"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i><i class="van-swipe__indicator"></i></div>
</div>
@ -60,10 +60,10 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-swipe">
<div class="van-swipe__track" style="width: 400px; transition-duration: 0ms; transform: translateX(0px);">
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">1</div>
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">2</div>
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">3</div>
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">4</div>
<div class="van-swipe-item" style="width: 100px;">1</div>
<div class="van-swipe-item" style="width: 100px;">2</div>
<div class="van-swipe-item" style="width: 100px;">3</div>
<div class="van-swipe-item" style="width: 100px;">4</div>
</div>
<div class="custom-indicator">1/4</div>
</div>