From faefd7ec859b75554cf3123e5a2848a15dccc9d0 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 1 Nov 2020 10:28:33 +0800 Subject: [PATCH 1/2] fix(Swipe): incorrect lazy render when loop is false (#7465) --- src/swipe-item/index.js | 4 +-- src/swipe/test/index.spec.js | 64 +++++++++++++++++++++++++++--------- 2 files changed, 50 insertions(+), 18 deletions(-) diff --git a/src/swipe-item/index.js b/src/swipe-item/index.js index 6e01fed0e..9099ec32b 100644 --- a/src/swipe-item/index.js +++ b/src/swipe-item/index.js @@ -47,8 +47,8 @@ export default createComponent({ const active = parent.activeIndicator; const maxActive = parent.count - 1; - const prevActive = active === 0 ? maxActive : active - 1; - const nextActive = active === maxActive ? 0 : active + 1; + const prevActive = active === 0 && parent.loop ? maxActive : active - 1; + const nextActive = active === maxActive && parent.loop ? 0 : active + 1; return index === active || index === prevActive || index === nextActive; }, diff --git a/src/swipe/test/index.spec.js b/src/swipe/test/index.spec.js index ee5b1cb10..613ca97a7 100644 --- a/src/swipe/test/index.spec.js +++ b/src/swipe/test/index.spec.js @@ -175,26 +175,58 @@ test('lazy-render prop', async () => { await later(); const items = wrapper.findAll('.van-swipe-item'); - expect(items.at(0).contains('span')).toBeTruthy(); - expect(items.at(1).contains('span')).toBeTruthy(); - expect(items.at(2).contains('span')).toBeFalsy(); - expect(items.at(3).contains('span')).toBeTruthy(); + const expectRender = (results) => { + results.forEach((result, index) => { + expect(items.at(index).contains('span')).toEqual(result); + }); + }; + + expectRender([true, true, false, true]); wrapper.setData({ active: 1 }); - expect(items.at(0).contains('span')).toBeTruthy(); - expect(items.at(1).contains('span')).toBeTruthy(); - expect(items.at(2).contains('span')).toBeTruthy(); - expect(items.at(3).contains('span')).toBeFalsy(); + expectRender([true, true, true, false]); wrapper.setData({ active: 2 }); - expect(items.at(0).contains('span')).toBeFalsy(); - expect(items.at(1).contains('span')).toBeTruthy(); - expect(items.at(2).contains('span')).toBeTruthy(); - expect(items.at(3).contains('span')).toBeTruthy(); + expectRender([false, true, true, true]); wrapper.setData({ active: 3 }); - expect(items.at(0).contains('span')).toBeTruthy(); - expect(items.at(1).contains('span')).toBeFalsy(); - expect(items.at(2).contains('span')).toBeTruthy(); - expect(items.at(3).contains('span')).toBeTruthy(); + expectRender([true, false, true, true]); +}); + +test('lazy-render prop when loop is false', async () => { + const wrapper = mount({ + template: ` + + 1 + 2 + 3 + 4 + + `, + data() { + return { + active: 0, + }; + }, + }); + + await later(); + const items = wrapper.findAll('.van-swipe-item'); + + const expectRender = (results) => { + results.forEach((result, index) => { + expect(items.at(index).contains('span')).toEqual(result); + }); + }; + + expectRender([true, true, false, false]); + + wrapper.setData({ active: 1 }); + expectRender([true, true, true, false]); + + wrapper.setData({ active: 2 }); + expectRender([false, true, true, true]); + + wrapper.setData({ active: 3 }); + expectRender([false, false, true, true]); }); From 818192c1c86dcf2f3653cb1b4924ed4db83dbe50 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 1 Nov 2020 10:47:09 +0800 Subject: [PATCH 2/2] fix(Swipe): item should only rendered once (#7466) --- src/swipe-item/index.js | 13 ++++++++++--- src/swipe/test/index.spec.js | 15 +++++---------- 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/src/swipe-item/index.js b/src/swipe-item/index.js index 9099ec32b..8039d0996 100644 --- a/src/swipe-item/index.js +++ b/src/swipe-item/index.js @@ -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; }, }, diff --git a/src/swipe/test/index.spec.js b/src/swipe/test/index.spec.js index 613ca97a7..bf737c9fd 100644 --- a/src/swipe/test/index.spec.js +++ b/src/swipe/test/index.spec.js @@ -163,6 +163,7 @@ test('lazy-render prop', async () => { 2 3 4 + 5 `, 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]); });