diff --git a/src/swipe-item/index.js b/src/swipe-item/index.js index 6e01fed0e..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; } @@ -47,10 +48,16 @@ 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; + 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 ee5b1cb10..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() { @@ -175,26 +176,52 @@ 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, 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, true]); 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(); - - 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, true, true, 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([true, true, true, true]); });