fix(Swipe): item should only rendered once (#7466)

This commit is contained in:
neverland 2020-11-01 10:47:09 +08:00 committed by GitHub
parent faefd7ec85
commit 818192c1c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 13 deletions

View File

@ -9,6 +9,7 @@ export default createComponent({
data() {
return {
offset: 0,
inited: false,
mounted: false,
};
},
@ -34,9 +35,9 @@ export default createComponent({
},
shouldRender() {
const { index, parent, mounted } = this;
const { index, inited, parent, mounted } = this;
if (!parent.lazyRender) {
if (!parent.lazyRender || inited) {
return true;
}
@ -49,8 +50,14 @@ export default createComponent({
const maxActive = parent.count - 1;
const prevActive = active === 0 && parent.loop ? maxActive : active - 1;
const nextActive = active === maxActive && parent.loop ? 0 : active + 1;
const shouldRender =
index === active || index === prevActive || index === nextActive;
return index === active || index === prevActive || index === nextActive;
if (shouldRender) {
this.inited = true;
}
return shouldRender;
},
},

View File

@ -163,6 +163,7 @@ test('lazy-render prop', async () => {
<van-swipe-item><span>2</span></van-swipe-item>
<van-swipe-item><span>3</span></van-swipe-item>
<van-swipe-item><span>4</span></van-swipe-item>
<van-swipe-item><span>5</span></van-swipe-item>
</van-swipe>
`,
data() {
@ -181,16 +182,13 @@ test('lazy-render prop', async () => {
});
};
expectRender([true, true, false, true]);
expectRender([true, true, false, false, true]);
wrapper.setData({ active: 1 });
expectRender([true, true, true, false]);
expectRender([true, true, true, false, true]);
wrapper.setData({ active: 2 });
expectRender([false, true, true, true]);
wrapper.setData({ active: 3 });
expectRender([true, false, true, true]);
expectRender([true, true, true, true, true]);
});
test('lazy-render prop when loop is false', async () => {
@ -225,8 +223,5 @@ test('lazy-render prop when loop is false', async () => {
expectRender([true, true, true, false]);
wrapper.setData({ active: 2 });
expectRender([false, true, true, true]);
wrapper.setData({ active: 3 });
expectRender([false, false, true, true]);
expectRender([true, true, true, true]);
});