alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(Swipe): incorrect size during ssr (#7821)

Browse Source
This commit is contained in:
neverland
2020-12-26 15:18:28 +08:00
committed by GitHub
parent b89832c03e
commit 76aa0e5dd9
5 changed files with 32 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/swipe/index.js
+10 -6
View File
@@ -124,15 +124,19 @@ export default createComponent({
},
trackStyle() {
const mainAxis = this.vertical ? 'height' : 'width';
const crossAxis = this.vertical ? 'width' : 'height';
return {
[mainAxis]: `${this.trackSize}px`,
[crossAxis]: this[crossAxis] ? `${this[crossAxis]}px` : '',
const style = {
transitionDuration: `${this.swiping ? 0 : this.duration}ms`,
transform: `translate${this.vertical ? 'Y' : 'X'}(${this.offset}px)`,
};
if (this.size) {
const mainAxis = this.vertical ? 'height' : 'width';
const crossAxis = this.vertical ? 'width' : 'height';
style[mainAxis] = `${this.trackSize}px`;
style[crossAxis] = this[crossAxis] ? `${this[crossAxis]}px` : '';
}
return style;
},
indicatorStyle() {
src/swipe/test/__snapshots__/demo.spec.js.snap
+6 -6
View File
@@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-swipe">
<div class="van-swipe__track" style="width: 400px; transition-duration: 0ms; transform: translateX(0px);">
<div class="van-swipe__track" style="transition-duration: 0ms; transform: translateX(0px); width: 400px;">
<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>
@@ -15,7 +15,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-swipe">
<div class="van-swipe__track" style="width: 400px; transition-duration: 0ms; transform: translateX(0px);">
<div class="van-swipe__track" style="transition-duration: 0ms; transform: translateX(0px); width: 400px;">
<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>
@@ -26,7 +26,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-swipe">
<div class="van-swipe__track" style="width: 400px; transition-duration: 0ms; transform: translateX(0px);">
<div class="van-swipe__track" style="transition-duration: 0ms; transform: translateX(0px); width: 400px;">
<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>
@@ -37,7 +37,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="demo-swipe--vertical van-swipe" style="height: 200px;">
<div class="van-swipe__track van-swipe__track--vertical" style="height: 400px; transition-duration: 0ms; transform: translateY(0px);">
<div class="van-swipe__track van-swipe__track--vertical" style="transition-duration: 0ms; transform: translateY(0px); height: 400px;">
<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>
@@ -48,7 +48,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-swipe">
<div class="van-swipe__track" style="width: 1200px; transition-duration: 0ms; transform: translateX(0px);">
<div class="van-swipe__track" style="transition-duration: 0ms; transform: translateX(0px); width: 1200px;">
<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>
@@ -59,7 +59,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-swipe">
<div class="van-swipe__track" style="width: 400px; transition-duration: 0ms; transform: translateX(0px);">
<div class="van-swipe__track" style="transition-duration: 0ms; transform: translateX(0px); width: 400px;">
<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>