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): should render dynamic swipe item correctly (#8288)

Browse Source
This commit is contained in:
neverland 2021-03-05 15:33:17 +08:00 committed by GitHub
parent 08086c8002
commit d76567eeec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 73 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/swipe/index.tsx
View File

@ -282,7 +282,9 @@ export default createComponent({
const rect = useRect(root);
active = Math.min(children.length - 1, active);
if (count.value) {
active = Math.min(count.value - 1, active);
}
state.rect = rect;
state.swiping = true;
@ -430,10 +432,7 @@ export default createComponent({
(value) => initialize(+value)
);
watch(
() => children.length,
() => initialize(state.active)
);
watch(count, () => initialize(state.active));
watch(
() => props.autoplay,

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

@ -32,6 +32,44 @@ exports[`should not allow to drag swipe when touchable is false 1`] = `
</div>
`;
exports[`should render dynamic SwipeItem correctly 1`] = `
<div class="van-swipe">
<div style="transition-duration: 500ms; transform: translateX(0px);"
class="van-swipe__track"
>
</div>
</div>
`;
exports[`should render dynamic SwipeItem correctly 2`] = `
<div class="van-swipe">
<div style="transition-duration: 0ms; transform: translateX(0px); width: 200px;"
class="van-swipe__track"
>
<div class="van-swipe-item"
style="width: 100px;"
>
<span>
1
</span>
</div>
<div class="van-swipe-item"
style="width: 100px;"
>
<span>
2
</span>
</div>
</div>
<div class="van-swipe__indicators">
<i class="van-swipe__indicator van-swipe__indicator--active">
</i>
<i class="van-swipe__indicator">
</i>
</div>
</div>
`;
exports[`should render initial swipe correctly 1`] = `
<div class="van-swipe">
<div style="transition-duration: 0ms; transform: translateX(0px); width: 300px;"

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

@ -1,3 +1,4 @@
import { ref, onMounted } from 'vue';
import {
mount,
later,
@ -296,3 +297,33 @@ test('should render swipe item correctly when using lazy-render prop and loop is
await wrapper.setData({ active: 2 });
expectRender([true, true, true, true]);
});
test('should render dynamic SwipeItem correctly', async () => {
const wrapper = mount({
setup() {
const render = ref(false);
onMounted(() => {
render.value = true;
});
return { render };
},
render() {
return (
<Swipe>
{this.render && [
<SwipeItem>
<span>1</span>
</SwipeItem>,
<SwipeItem>
<span>2</span>
</SwipeItem>,
]}
</Swipe>
);
},
});
expect(wrapper.html()).toMatchSnapshot();
await later();
expect(wrapper.html()).toMatchSnapshot();
});