[Improvement] Swipe: add swipeTo method (#1222)

packages/swipe/en-US.md

@@ -94,3 +94,11 @@ export default {
 | Event | Description | Arguments |
 |-----------|-----------|-----------|
 | change | Triggered when current swipe change | index: index of current swipe |
+
+### Methods
+
+Use ref to get swipe instance and call instance methods
+
+| Name | Attribute | Return value | Description |
+|-----------|-----------|-----------|-------------|
+| swipeTo | index: 目标位置的索引 | void | 滚动到目标位置 |

packages/swipe/index.vue

@@ -90,6 +90,8 @@ export default create({
     autoplay(autoplay) {
       if (!autoplay) {
         this.clear();
+      } else {
+        this.autoPlay();
       }
     }
   },
@@ -206,6 +208,15 @@ export default create({
       this.offset = offset - this.active * this.size;
     },
 
+    swipeTo(index) {
+      this.swiping = true;
+      this.correctPosition();
+      setTimeout(() => {
+        this.swiping = false;
+        this.move(index % this.count - this.active);
+      }, 30);
+    },
+
     correctPosition() {
       if (this.active <= -1) {
         this.move(this.count);
@@ -221,6 +232,7 @@ export default create({
 
     autoPlay() {
       const { autoplay } = this;
+
       if (autoplay && this.count > 1) {
         this.clear();
         this.timer = setTimeout(() => {

packages/swipe/test/index.spec.js

@@ -0,0 +1,154 @@
+import Swipe from '..';
+import SwipeItem from '../../swipe-item';
+import { mount } from '@vue/test-utils';
+import { triggerDrag } from '../../../test/utils';
+
+const Component = {
+  template: `
+    <swipe ref="swipe" v-bind="$props">
+      <swipe-item :style="style">1</swipe-item>
+      <swipe-item :style="style">2</swipe-item>
+      <swipe-item :style="style">3</swipe-item>
+    </swipe>
+  `,
+  components: {
+    Swipe,
+    SwipeItem
+  },
+  props: {
+    vertical: Boolean,
+    loop: {
+      type: Boolean,
+      default: true
+    },
+    touchable: {
+      type: Boolean,
+      default: true
+    },
+    autoplay: {
+      type: Number,
+      default: 0
+    },
+    initialSwipe: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      style: {
+        width: '100px',
+        height: '100px'
+      }
+    };
+  }
+};
+
+test('autoplay', done => {
+  const wrapper = mount(Component, {
+    propsData: {
+      autoplay: 20
+    }
+  });
+  const { swipe } = wrapper.vm.$refs;
+
+  setTimeout(() => {
+    expect(swipe.active).toEqual(1);
+    wrapper.setData({ autoplay: 0 });
+
+    setTimeout(() => {
+      expect(swipe.active).toEqual(1);
+      wrapper.setData({ autoplay: 20 });
+
+      setTimeout(() => {
+        expect(swipe.active).toEqual(2);
+        wrapper.destroy();
+        done();
+      }, 60);
+    }, 60);
+  }, 60);
+});
+
+test('swipeTo', done => {
+  const wrapper = mount(Component);
+  const { swipe } = wrapper.vm.$refs;
+  swipe.swipeTo(2);
+
+  setTimeout(() => {
+    expect(swipe.active).toEqual(2);
+    done();
+  }, 30);
+});
+
+test('initial swipe', () => {
+  const wrapper = mount(Component);
+  const { swipe } = wrapper.vm.$refs;
+
+  expect(swipe.active).toEqual(0);
+  wrapper.setProps({ initialSwipe: 2 });
+  expect(swipe.active).toEqual(2);
+});
+
+test('vertical swipe', () => {
+  const wrapper = mount(Component, {
+    propsData: {
+      vertical: true
+    }
+  });
+  const { swipe } = wrapper.vm.$refs;
+  const track = wrapper.find('.van-swipe__track');
+
+  triggerDrag(track, 0, -100);
+  expect(swipe.active).toEqual(1);
+});
+
+test('untouchable', () => {
+  const wrapper = mount(Component, {
+    propsData: {
+      touchable: false
+    }
+  });
+  const { swipe } = wrapper.vm.$refs;
+  const track = wrapper.find('.van-swipe__track');
+
+  triggerDrag(track, 100, 0);
+  expect(swipe.active).toEqual(0);
+});
+
+test('loop', () => {
+  const wrapper = mount(Component);
+  const { swipe } = wrapper.vm.$refs;
+  const track = wrapper.find('.van-swipe__track');
+
+  triggerDrag(track, -100, 0);
+  expect(swipe.active).toEqual(1);
+  triggerDrag(track, -100, 0);
+  expect(swipe.active).toEqual(2);
+  triggerDrag(track, -100, 0);
+  expect(swipe.active).toEqual(3);
+  triggerDrag(track, -100, 0);
+  expect(swipe.active).toEqual(1);
+  triggerDrag(track, 100, 0);
+  expect(swipe.active).toEqual(0);
+  triggerDrag(track, 100, 0);
+  expect(swipe.active).toEqual(-1);
+  triggerDrag(track, 100, 0);
+  expect(swipe.active).toEqual(1);
+});
+
+test('not loop', () => {
+  const wrapper = mount(Component, {
+    propsData: {
+      loop: false
+    }
+  });
+  const { swipe } = wrapper.vm.$refs;
+  const track = wrapper.find('.van-swipe__track');
+
+  triggerDrag(track, -100, 0);
+  expect(swipe.active).toEqual(1);
+  triggerDrag(track, -100, 0);
+  expect(swipe.active).toEqual(2);
+  triggerDrag(track, -100, 0);
+  expect(swipe.active).toEqual(2);
+});

packages/swipe/zh-CN.md

@@ -94,3 +94,11 @@ export default {
 | 事件名 | 说明 | 参数 |
 |-----------|-----------|-----------|
 | change | 每一页轮播结束后触发 | index, 当前页的索引 |
+
+### 方法
+
+通过 ref 可以获取到 swipe 实例并调用实例方法
+
+| 方法名 | 参数 | 返回值 | 介绍 |
+|-----------|-----------|-----------|-------------|
+| swipeTo | index: 目标位置的索引 | void | 滚动到目标位置 |