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

fix(Swipe): incorrect item width after scaled (#8329)

Browse Source
This commit is contained in:
neverland 2021-03-13 18:07:03 +08:00 committed by GitHub
parent e54918614f
commit 869b9a66c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/swipe/index.js
View File

@ -166,7 +166,10 @@ export default createComponent({
clearTimeout(this.timer);
const rect = this.$el.getBoundingClientRect();
const rect = {
width: this.$el.offsetWidth,
height: this.$el.offsetHeight,
};
this.rect = rect;
this.swiping = true;

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

@ -4,44 +4,44 @@ exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-swipe">
<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>
<div class="van-swipe-item" style="width: 100px;">4</div>
<div class="van-swipe__track" style="transition-duration: 0ms; transform: translateX(0px);">
<div class="van-swipe-item">1</div>
<div class="van-swipe-item">2</div>
<div class="van-swipe-item">3</div>
<div class="van-swipe-item">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="van-swipe">
<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://img01.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://img01.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://img01.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://img01.yzcdn.cn/vant/apple-4.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
<div class="van-swipe__track" style="transition-duration: 0ms; transform: translateX(0px);">
<div class="van-swipe-item"><img data-src="https://img01.yzcdn.cn/vant/apple-1.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
<div class="van-swipe-item"><img data-src="https://img01.yzcdn.cn/vant/apple-2.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
<div class="van-swipe-item"><img data-src="https://img01.yzcdn.cn/vant/apple-3.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" lazy="loading"></div>
<div class="van-swipe-item"><img data-src="https://img01.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>
</div>
<div>
<div class="van-swipe">
<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>
<div class="van-swipe-item" style="width: 100px;">4</div>
<div class="van-swipe__track" style="transition-duration: 0ms; transform: translateX(0px);">
<div class="van-swipe-item">1</div>
<div class="van-swipe-item">2</div>
<div class="van-swipe-item">3</div>
<div class="van-swipe-item">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 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>
<div class="van-swipe-item" style="height: 100px;">4</div>
<div class="van-swipe__track van-swipe__track--vertical" style="transition-duration: 0ms; transform: translateY(0px); height: 800px;">
<div class="van-swipe-item" style="height: 200px;">1</div>
<div class="van-swipe-item" style="height: 200px;">2</div>
<div class="van-swipe-item" style="height: 200px;">3</div>
<div class="van-swipe-item" style="height: 200px;">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>
@ -59,11 +59,11 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-swipe">
<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>
<div class="van-swipe-item" style="width: 100px;">4</div>
<div class="van-swipe__track" style="transition-duration: 0ms; transform: translateX(0px);">
<div class="van-swipe-item">1</div>
<div class="van-swipe-item">2</div>
<div class="van-swipe-item">3</div>
<div class="van-swipe-item">4</div>
</div>
<div class="custom-indicator">1/4</div>
</div>

15
src/swipe/test/demo.spec.js
View File

@ -1,17 +1,4 @@
import Demo from '../demo';
import { snapshotDemo } from '../../../test/demo';
import { mockGetBoundingClientRect } from '../../../test';
let restore;
snapshotDemo(Demo, {
beforeTest: () => {
restore = mockGetBoundingClientRect({
width: 100,
height: 100,
});
},
afterTest: () => {
restore();
},
});
snapshotDemo(Demo);