blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
neverland 2018-06-05 09:39:02 +08:00 committed by GitHub
parent a3579a88e4
commit b33c8ef5f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 223 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/picker/en-US.md
View File

@ -156,18 +156,19 @@ Picker events will pass different parameters according to the columns are single
| defaultIndex | Default value index |
| className | ClassName for this column |
### Picker instance
You can get the picker instance in 'change' event, and
### Methods
| Method | Description |
|-----------|-----------|
| getValues() | Get current values of all columns |
| setValues(values) | Set current values of all columns |
| getIndexes() | Get current indexes of all columns |
| setIndexes(indexes) | Set current indexes of all columns |
| getColumnValue(columnIndex) | Get current value of the column |
| setColumnValue(columnIndex, value) | Set current value of the column |
| getColumnIndex(columnIndex) | Get current index of the column |
| setColumnIndex(columnIndex, optionIndex) | Set current index of the column |
| getColumnValues(columnIndex) | Get columns data of the column |
| setColumnValues(columnIndex, values) | Set columns data of the column |
Use ref to get picker instance and call instance methods
| Name | Attribute | Return value | Description |
|-----------|-----------|-----------|-------------|
| getValues | - | values | Get current values of all columns |
| setValues | values | - | Set current values of all columns |
| getIndexes | - | indexes | Get current indexes of all columns |
| setIndexes | indexes | - | Set current indexes of all columns |
| getColumnValue | columnIndex | value | Get current value of the column |
| setColumnValue | columnIndex, value | - | Set current value of the column |
| getColumnIndex | columnIndex | optionIndex | Get current index of the column |
| setColumnIndex | columnIndex, optionIndex | - | Set current index of the column |
| getColumnValues | columnIndex | values | Get columns data of the column |
| setColumnValue | columnIndex, values | - | Set columns data of the column |

29
packages/picker/zh-CN.md
View File

@ -159,18 +159,19 @@ Picker 组件的事件会根据 columns 是单列或多列返回不同的参数
| defaultIndex | 初始选中项的索引，默认为 0 |
| className | 为对应列添加额外的`class` |
### Picker 实例
在`change`事件中，可以获取到`picker`实例，通过实例方法可以灵活控制 Picker 内容
### 方法
| 函数 | 说明 |
|-----------|-----------|
| getValues() | 获取所有列选中的值，返回一个数组 |
| setValues(values) | 设置所有列选中的值 |
| getIndexes() | 获取所有列选中值对应的索引，返回一个数组 |
| setIndexes(indexes) | 设置所有列选中值对应的索引 |
| getColumnValue(columnIndex) | 获取对应列选中的值 |
| setColumnValue(columnIndex, value) | 设置对应列选中的值 |
| getColumnIndex(columnIndex) | 获取对应列选中项的索引 |
| setColumnIndex(columnIndex, optionIndex) | 设置对应列选中项的索引 |
| getColumnValues(columnIndex) | 获取对应列中所有选项 |
| setColumnValues(columnIndex, values) | 设置对应列中所有选项 |
通过 ref 可以获取到 picker 实例并调用实例方法
| 方法名 | 参数 | 返回值 | 介绍 |
|-----------|-----------|-----------|-------------|
| getValues | - | values | 获取所有列选中的值 |
| setValues | values | - | 设置所有列选中的值 |
| getIndexes | - | indexes | 获取所有列选中值对应的索引 |
| setIndexes | indexes | - | 设置所有列选中值对应的索引 |
| getColumnValue | columnIndex | value | 获取对应列选中的值 |
| setColumnValue | columnIndex, value | - | 设置对应列选中的值 |
| getColumnIndex | columnIndex | optionIndex | 获取对应列选中项的索引 |
| setColumnIndex | columnIndex, optionIndex | - | 设置对应列选中项的索引 |
| getColumnValues | columnIndex | values | 获取对应列中所有选项 |
| setColumnValue | columnIndex, values | - | 设置对应列中所有选项 |

8
packages/sku/en-US.md
View File

@ -111,9 +111,11 @@ Vue.use(Sku);
### Methods
| Method | Description |
|-----------|-----------|
| getSkuData() | Get current sku data |
Use ref to get sku instance and call instance methods
| Name | Attribute | Return value | Description |
|-----------|-----------|-----------|-------------|
| getSkuData | - | skuData | Get current skuData |
### Slot

9
packages/sku/zh-CN.md
View File

@ -112,11 +112,14 @@ Vue.use(Sku);
### 方法
| 函数 | 说明 |
|-----------|-----------|
| getSkuData() | 获取当前 skuData |
通过 ref 可以获取到 sku 实例并调用实例方法
| 方法名 | 参数 | 返回值 | 介绍 |
|-----------|-----------|-----------|-------------|
| getSkuData | - | skuData | 获取当前 skuData |
### Slot
Sku 组件默认划分好了若干区块，这些区块都定义成了 slot，可以按需进行替换。区块顺序见下表：
| 名称 | 说明 |

8
packages/swipe/en-US.md
View File

@ -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 | 滚动到目标位置 |

12
packages/swipe/index.vue
View File

@ -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(() => {

154
packages/swipe/test/index.spec.js Normal file
View File

@ -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);
});

8
packages/swipe/zh-CN.md
View File

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