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 (#8330)

Browse Source
This commit is contained in:
neverland 2021-03-13 18:19:42 +08:00 committed by GitHub
parent c5ac2b62aa
commit 6e026e18c3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 72 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/swipe/Swipe.tsx
View File

@ -23,7 +23,6 @@ import {
// Composables // Composables
import { import {
useRect,
doubleRaf, doubleRaf,
useChildren, useChildren,
useWindowSize, useWindowSize,
@ -95,7 +94,7 @@ export default defineComponent({
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
const root = ref<HTMLElement>(); const root = ref<HTMLElement>();
const state = reactive({ const state = reactive({
rect: null as DOMRect | null, rect: null as { width: number; height: number } | null,
width: 0, width: 0,
height: 0, height: 0,
offset: 0, offset: 0,
@ -283,7 +282,10 @@ export default defineComponent({
stopAutoplay(); stopAutoplay();
const rect = useRect(root); const rect = {
width: root.value.offsetWidth,
height: root.value.offsetHeight,
};
if (count.value) { if (count.value) {
active = Math.min(count.value - 1, active); active = Math.min(count.value - 1, active);

82
src/swipe/test/__snapshots__/demo.spec.ts.snap
View File

@ -3,27 +3,19 @@
exports[`should render demo and match snapshot 1`] = ` exports[`should render demo and match snapshot 1`] = `
<div> <div>
<div class="van-swipe"> <div class="van-swipe">
<div style="transition-duration: 0ms; transform: translateX(0px); width: 400px;" <div style="transition-duration: 0ms; transform: translateX(0px);"
class="van-swipe__track" class="van-swipe__track"
> >
<div class="van-swipe-item" <div class="van-swipe-item">
style="width: 100px;"
>
1 1
</div> </div>
<div class="van-swipe-item" <div class="van-swipe-item">
style="width: 100px;"
>
2 2
</div> </div>
<div class="van-swipe-item" <div class="van-swipe-item">
style="width: 100px;"
>
3 3
</div> </div>
<div class="van-swipe-item" <div class="van-swipe-item">
style="width: 100px;"
>
4 4
</div> </div>
</div> </div>
@ -43,26 +35,18 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
<div> <div>
<div class="van-swipe"> <div class="van-swipe">
<div style="transition-duration: 0ms; transform: translateX(0px); width: 400px;" <div style="transition-duration: 0ms; transform: translateX(0px);"
class="van-swipe__track" class="van-swipe__track"
> >
<div class="van-swipe-item" <div class="van-swipe-item">
style="width: 100px;"
>
<img src="https://img.yzcdn.cn/vant/apple-1.jpg"> <img src="https://img.yzcdn.cn/vant/apple-1.jpg">
</div> </div>
<div class="van-swipe-item" <div class="van-swipe-item">
style="width: 100px;"
>
<img src="https://img.yzcdn.cn/vant/apple-2.jpg"> <img src="https://img.yzcdn.cn/vant/apple-2.jpg">
</div> </div>
<div class="van-swipe-item" <div class="van-swipe-item">
style="width: 100px;"
>
</div> </div>
<div class="van-swipe-item" <div class="van-swipe-item">
style="width: 100px;"
>
<img src="https://img.yzcdn.cn/vant/apple-4.jpg"> <img src="https://img.yzcdn.cn/vant/apple-4.jpg">
</div> </div>
</div> </div>
@ -80,27 +64,19 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
<div> <div>
<div class="van-swipe"> <div class="van-swipe">
<div style="transition-duration: 0ms; transform: translateX(0px); width: 400px;" <div style="transition-duration: 0ms; transform: translateX(0px);"
class="van-swipe__track" class="van-swipe__track"
> >
<div class="van-swipe-item" <div class="van-swipe-item">
style="width: 100px;"
>
1 1
</div> </div>
<div class="van-swipe-item" <div class="van-swipe-item">
style="width: 100px;"
>
2 2
</div> </div>
<div class="van-swipe-item" <div class="van-swipe-item">
style="width: 100px;"
>
3 3
</div> </div>
<div class="van-swipe-item" <div class="van-swipe-item">
style="width: 100px;"
>
4 4
</div> </div>
</div> </div>
@ -122,26 +98,26 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-swipe demo-swipe--vertical" <div class="van-swipe demo-swipe--vertical"
style="height: 200px;" style="height: 200px;"
> >
<div style="transition-duration: 0ms; transform: translateY(0px); height: 400px;" <div style="transition-duration: 0ms; transform: translateY(0px); height: 800px;"
class="van-swipe__track van-swipe__track--vertical" class="van-swipe__track van-swipe__track--vertical"
> >
<div class="van-swipe-item" <div class="van-swipe-item"
style="height: 100px;" style="height: 200px;"
> >
1 1
</div> </div>
<div class="van-swipe-item" <div class="van-swipe-item"
style="height: 100px;" style="height: 200px;"
> >
2 2
</div> </div>
<div class="van-swipe-item" <div class="van-swipe-item"
style="height: 100px;" style="height: 200px;"
> >
3 3
</div> </div>
<div class="van-swipe-item" <div class="van-swipe-item"
style="height: 100px;" style="height: 200px;"
> >
4 4
</div> </div>
@ -202,27 +178,19 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
<div> <div>
<div class="van-swipe"> <div class="van-swipe">
<div style="transition-duration: 0ms; transform: translateX(0px); width: 400px;" <div style="transition-duration: 0ms; transform: translateX(0px);"
class="van-swipe__track" class="van-swipe__track"
> >
<div class="van-swipe-item" <div class="van-swipe-item">
style="width: 100px;"
>
1 1
</div> </div>
<div class="van-swipe-item" <div class="van-swipe-item">
style="width: 100px;"
>
2 2
</div> </div>
<div class="van-swipe-item" <div class="van-swipe-item">
style="width: 100px;"
>
3 3
</div> </div>
<div class="van-swipe-item" <div class="van-swipe-item">
style="width: 100px;"
>
4 4
</div> </div>
</div> </div>

48
src/swipe/test/__snapshots__/index.spec.js.snap
View File

@ -1,22 +1,24 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should not allow to drag swipe when touchable is false 1`] = ` exports[`should not allow to drag swipe when touchable is false 1`] = `
<div class="van-swipe"> <div class="van-swipe"
style="width: 100px; height: 100px;"
>
<div style="transition-duration: 0ms; transform: translateX(0px); width: 300px;" <div style="transition-duration: 0ms; transform: translateX(0px); width: 300px;"
class="van-swipe__track" class="van-swipe__track"
> >
<div class="van-swipe-item" <div class="van-swipe-item"
style="width: 100px; height: 100px;" style="width: 100px;"
> >
1 1
</div> </div>
<div class="van-swipe-item" <div class="van-swipe-item"
style="width: 100px; height: 100px;" style="width: 100px;"
> >
2 2
</div> </div>
<div class="van-swipe-item" <div class="van-swipe-item"
style="width: 100px; height: 100px;" style="width: 100px;"
> >
3 3
</div> </div>
@ -33,7 +35,9 @@ exports[`should not allow to drag swipe when touchable is false 1`] = `
`; `;
exports[`should render dynamic SwipeItem correctly 1`] = ` exports[`should render dynamic SwipeItem correctly 1`] = `
<div class="van-swipe"> <div class="van-swipe"
style="width: 100px; height: 100px;"
>
<div style="transition-duration: 500ms; transform: translateX(0px);" <div style="transition-duration: 500ms; transform: translateX(0px);"
class="van-swipe__track" class="van-swipe__track"
> >
@ -42,7 +46,9 @@ exports[`should render dynamic SwipeItem correctly 1`] = `
`; `;
exports[`should render dynamic SwipeItem correctly 2`] = ` exports[`should render dynamic SwipeItem correctly 2`] = `
<div class="van-swipe"> <div class="van-swipe"
style="width: 100px; height: 100px;"
>
<div style="transition-duration: 0ms; transform: translateX(0px); width: 200px;" <div style="transition-duration: 0ms; transform: translateX(0px); width: 200px;"
class="van-swipe__track" class="van-swipe__track"
> >
@ -71,22 +77,24 @@ exports[`should render dynamic SwipeItem correctly 2`] = `
`; `;
exports[`should render initial swipe correctly 1`] = ` exports[`should render initial swipe correctly 1`] = `
<div class="van-swipe"> <div class="van-swipe"
style="width: 100px; height: 100px;"
>
<div style="transition-duration: 0ms; transform: translateX(0px); width: 300px;" <div style="transition-duration: 0ms; transform: translateX(0px); width: 300px;"
class="van-swipe__track" class="van-swipe__track"
> >
<div class="van-swipe-item" <div class="van-swipe-item"
style="width: 100px; height: 100px;" style="width: 100px;"
> >
1 1
</div> </div>
<div class="van-swipe-item" <div class="van-swipe-item"
style="width: 100px; height: 100px;" style="width: 100px;"
> >
2 2
</div> </div>
<div class="van-swipe-item" <div class="van-swipe-item"
style="width: 100px; height: 100px;" style="width: 100px;"
> >
3 3
</div> </div>
@ -103,22 +111,24 @@ exports[`should render initial swipe correctly 1`] = `
`; `;
exports[`should render initial swipe correctly 2`] = ` exports[`should render initial swipe correctly 2`] = `
<div class="van-swipe"> <div class="van-swipe"
style="width: 100px; height: 100px;"
>
<div style="transition-duration: 0ms; transform: translateX(-200px); width: 300px;" <div style="transition-duration: 0ms; transform: translateX(-200px); width: 300px;"
class="van-swipe__track" class="van-swipe__track"
> >
<div class="van-swipe-item" <div class="van-swipe-item"
style="width: 100px; height: 100px;" style="width: 100px;"
> >
1 1
</div> </div>
<div class="van-swipe-item" <div class="van-swipe-item"
style="width: 100px; height: 100px;" style="width: 100px;"
> >
2 2
</div> </div>
<div class="van-swipe-item" <div class="van-swipe-item"
style="width: 100px; height: 100px;" style="width: 100px;"
> >
3 3
</div> </div>
@ -135,22 +145,24 @@ exports[`should render initial swipe correctly 2`] = `
`; `;
exports[`should render vertical swipe when using vertical prop 1`] = ` exports[`should render vertical swipe when using vertical prop 1`] = `
<div class="van-swipe"> <div class="van-swipe"
style="width: 100px; height: 100px;"
>
<div style="transition-duration: 500ms; transform: translateY(-100px); height: 300px;" <div style="transition-duration: 500ms; transform: translateY(-100px); height: 300px;"
class="van-swipe__track van-swipe__track--vertical" class="van-swipe__track van-swipe__track--vertical"
> >
<div class="van-swipe-item" <div class="van-swipe-item"
style="width: 100px; height: 100px;" style="height: 100px;"
> >
1 1
</div> </div>
<div class="van-swipe-item" <div class="van-swipe-item"
style="width: 100px; height: 100px;" style="height: 100px;"
> >
2 2
</div> </div>
<div class="van-swipe-item" <div class="van-swipe-item"
style="width: 100px; height: 100px;" style="height: 100px;"
> >
3 3
</div> </div>

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

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

40
src/swipe/test/index.spec.js
View File

@ -1,27 +1,8 @@
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import { import { mount, later, trigger, triggerDrag } from '../../../test';
mount,
later,
trigger,
triggerDrag,
mockGetBoundingClientRect,
} from '../../../test';
import { Swipe } from '..'; import { Swipe } from '..';
import { SwipeItem } from '../../swipe-item'; import { SwipeItem } from '../../swipe-item';
let restore;
beforeEach(() => {
restore = mockGetBoundingClientRect({
width: 100,
height: 100,
});
});
afterEach(() => {
restore();
});
function mockPageHidden() { function mockPageHidden() {
let hidden = true; let hidden = true;
@ -33,6 +14,11 @@ function mockPageHidden() {
hidden = false; hidden = false;
} }
const swipeStyle = {
width: '100px',
height: '100px',
};
const Component = { const Component = {
props: { props: {
vertical: Boolean, vertical: Boolean,
@ -54,15 +40,11 @@ const Component = {
}, },
}, },
render() { render() {
const style = {
width: '100px',
height: '100px',
};
return ( return (
<Swipe ref="swipe" {...this.$props}> <Swipe ref="swipe" style={swipeStyle} {...this.$props}>
<SwipeItem style={style}>1</SwipeItem> <SwipeItem>1</SwipeItem>
<SwipeItem style={style}>2</SwipeItem> <SwipeItem>2</SwipeItem>
<SwipeItem style={style}>3</SwipeItem> <SwipeItem>3</SwipeItem>
</Swipe> </Swipe>
); );
}, },
@ -309,7 +291,7 @@ test('should render dynamic SwipeItem correctly', async () => {
}, },
render() { render() {
return ( return (
<Swipe> <Swipe style={swipeStyle}>
{this.render && [ {this.render && [
<SwipeItem> <SwipeItem>
<span>1</span> <span>1</span>