feat(Swipe): add prev、next method (#5548)

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 |
 

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 格式

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 = {}) {
+    prev() {
-      this.swiping = true;
-      this.resetTouchStatus();
       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.next();
-          this.resetTouchStatus();
+          this.autoPlay();
-          this.correctPosition();
-
-          doubleRaf(() => {
-            this.swiping = false;
-            this.move({
-              pace: 1,
-              emitChange: true
-            });
-            this.autoPlay();
-          });
         }, autoplay);
       }
     },

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;