diff --git a/src/swipe/README.md b/src/swipe/README.md index c9b572a6a..3bab04b61 100644 --- a/src/swipe/README.md +++ b/src/swipe/README.md @@ -160,6 +160,8 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Swipe instance and call instance | Name | Description | Attribute | Return value | Version | |------|------|------|------|------| +| prev | Swipe to prev item | - | - | 2.4.2 | +| next | Swipe to next item | - | - | 2.4.2 | | swipeTo | Swipe to target index | index: target index, options: Options | void | - | | resize | Resize Swipe when container element resized | - | void | 2.2.14 | diff --git a/src/swipe/README.zh-CN.md b/src/swipe/README.zh-CN.md index 6e06c816c..6b7a584cf 100644 --- a/src/swipe/README.zh-CN.md +++ b/src/swipe/README.zh-CN.md @@ -166,7 +166,9 @@ export default { | 方法名 | 说明 | 参数 | 返回值 | 版本 | |------|------|------|------|------| -| swipeTo | 滚动到目标位置 | index: number, options: Options | void | - | +| prev | 切换到上一轮播 | - | - | 2.4.2 | +| next | 切换到下一轮播 | - | - | 2.4.2 | +| swipeTo | 切换到指定位置 | index: number, options: Options | void | - | | resize | 外层元素大小变化后,可以调用此方法来触发重绘 | - | void | 2.2.14 | ### swipeTo Options 格式 diff --git a/src/swipe/index.js b/src/swipe/index.js index 4bc9c7375..dafffcb5d 100644 --- a/src/swipe/index.js +++ b/src/swipe/index.js @@ -169,7 +169,6 @@ export default createComponent({ if (!this.touchable) return; this.clear(); - this.swiping = true; this.touchStart(event); this.correctPosition(); }, @@ -260,10 +259,37 @@ export default createComponent({ }, // @exposed-api - swipeTo(index, options = {}) { - this.swiping = true; - this.resetTouchStatus(); + prev() { this.correctPosition(); + this.resetTouchStatus(); + + doubleRaf(() => { + this.swiping = false; + this.move({ + pace: -1, + emitChange: true + }); + }); + }, + + // @exposed-api + next() { + this.correctPosition(); + this.resetTouchStatus(); + + doubleRaf(() => { + this.swiping = false; + this.move({ + pace: 1, + emitChange: true + }); + }); + }, + + // @exposed-api + swipeTo(index, options = {}) { + this.correctPosition(); + this.resetTouchStatus(); doubleRaf(() => { let targetIndex; @@ -273,11 +299,6 @@ export default createComponent({ targetIndex = index % this.count; } - this.move({ - pace: targetIndex - this.active, - emitChange: true - }); - if (options.immediate) { doubleRaf(() => { this.swiping = false; @@ -285,10 +306,17 @@ export default createComponent({ } else { this.swiping = false; } + + this.move({ + pace: targetIndex - this.active, + emitChange: true + }); }); }, correctPosition() { + this.swiping = true; + if (this.active <= -1) { this.move({ pace: this.count }); } @@ -308,18 +336,8 @@ export default createComponent({ if (autoplay && this.count > 1) { this.clear(); this.timer = setTimeout(() => { - this.swiping = true; - this.resetTouchStatus(); - this.correctPosition(); - - doubleRaf(() => { - this.swiping = false; - this.move({ - pace: 1, - emitChange: true - }); - this.autoPlay(); - }); + this.next(); + this.autoPlay(); }, autoplay); } }, diff --git a/src/swipe/test/index.spec.js b/src/swipe/test/index.spec.js index d973aa99e..1333017a6 100644 --- a/src/swipe/test/index.spec.js +++ b/src/swipe/test/index.spec.js @@ -43,7 +43,7 @@ const Component = { } }; -test('swipeTo', async () => { +test('swipeTo method', async () => { const wrapper = mount(Component); const { swipe } = wrapper.vm.$refs; swipe.swipeTo(2); @@ -52,7 +52,7 @@ test('swipeTo', async () => { expect(swipe.active).toEqual(2); }); -test('swipeTo immediate', async () => { +test('swipeTo method with immediate option', async () => { const wrapper = mount(Component); const { swipe } = wrapper.vm.$refs; swipe.swipeTo(2, { @@ -63,6 +63,19 @@ test('swipeTo immediate', async () => { expect(swipe.active).toEqual(2); }); +test('prev and next method', async () => { + const wrapper = mount(Component); + const { swipe } = wrapper.vm.$refs; + + swipe.next(); + await later(50); + expect(swipe.active).toEqual(1); + + swipe.prev(); + await later(50); + expect(swipe.active).toEqual(0); +}); + test('initial swipe', () => { const wrapper = mount(Component); const { swipe } = wrapper.vm.$refs;