alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

[improvement] Picker: support Inertial rolling (#3331)

Browse Source
This commit is contained in:
流采
2019-05-22 16:33:35 +08:00
committed by neverland
parent 6d526b6c45
commit 21db7e57ad
11 changed files with 804 additions and 600 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/picker/PickerColumn.js
+122 -15
View File
@@ -1,11 +1,22 @@
import { deepClone } from '../utils/deep-clone';
import { use, isObj, range } from '../utils';
import { preventDefault } from '../utils/event';
import { TouchMixin } from '../mixins/touch';
const DEFAULT_DURATION = 200;
// 惯性滑动思路:
// 在手指离开屏幕时，如果和上一次 move 时的间隔小于 `MOMENTUM_LIMIT_TIME` 且 move 距
// 离大于 `MOMENTUM_LIMIT_DISTANCE` 时，执行惯性滑动，持续 `MOMENTUM_DURATION`
const MOMENTUM_DURATION = 1500;
const MOMENTUM_LIMIT_TIME = 300;
const MOMENTUM_LIMIT_DISTANCE = 15;
const [sfc, bem] = use('picker-column');
export default sfc({
mixins: [TouchMixin],
props: {
valueKey: String,
className: String,
@@ -17,10 +28,12 @@ export default sfc({
data() {
return {
startY: 0,
offset: 0,
duration: 0,
startOffset: 0,
momentumOffset: 0,
touchTimestamp: 0,
moving: false,
options: deepClone(this.initialOptions),
currentIndex: this.defaultIndex
};
@@ -50,29 +63,73 @@ export default sfc({
methods: {
onTouchStart(event) {
this.startY = event.touches[0].clientY;
this.startOffset = this.offset;
this.touchStart(event);
if (this.moving) {
const { translateY } = this.getEleTransform(this.$refs.wrapper);
this.startOffset = Math.min(0, translateY);
} else {
this.startOffset = this.offset;
}
this.duration = 0;
this.moving = false;
this.transitionEndTrigger = null;
this.touchTimestamp = Date.now();
this.momentumOffset = this.startOffset;
},
onTouchMove(event) {
preventDefault(event);
const deltaY = event.touches[0].clientY - this.startY;
this.moving = true;
this.touchMove(event);
this.offset = range(
this.startOffset + deltaY,
this.startOffset + this.deltaY,
-(this.count * this.itemHeight),
this.itemHeight
);
const now = Date.now();
if (now - this.touchTimestamp > MOMENTUM_LIMIT_TIME) {
this.touchTimestamp = now;
this.momentumOffset = this.offset;
}
},
onTouchEnd() {
const distance = this.offset - this.momentumOffset;
const duration = Date.now() - this.touchTimestamp;
const allowMomentum =
duration < MOMENTUM_LIMIT_TIME &&
Math.abs(distance) > MOMENTUM_LIMIT_DISTANCE;
if (allowMomentum) {
this.momentum(distance, duration);
return;
}
if (this.offset !== this.startOffset) {
this.duration = DEFAULT_DURATION;
const index = range(Math.round(-this.offset / this.itemHeight), 0, this.count - 1);
const index = this.getIndexByOffset(this.offset);
this.setIndex(index, true);
}
},
onTransitionEnd() {
this.moving = false;
if (this.transitionEndTrigger) {
this.transitionEndTrigger();
this.transitionEndTrigger = null;
}
},
onClickItem(e) {
const index = Number(e.currentTarget.getAttribute('data-index'));
this.duration = DEFAULT_DURATION;
this.setIndex(index, true);
},
adjustIndex(index) {
index = range(index, 0, this.count);
for (let i = index; i < this.count; i++) {
@@ -95,9 +152,19 @@ export default sfc({
index = this.adjustIndex(index) || 0;
this.offset = -index * this.itemHeight;
if (index !== this.currentIndex) {
this.currentIndex = index;
userAction && this.$emit('change', index);
const trigger = () => {
if (index !== this.currentIndex) {
this.currentIndex = index;
userAction && this.$emit('change', index);
}
};
// 若有触发过 `touchmove` 事件，那应该
// 在 `transitionend` 后再触发 `change` 事件
if (this.moving) {
this.transitionEndTrigger = trigger;
} else {
trigger();
}
},
@@ -112,7 +179,43 @@ export default sfc({
getValue() {
return this.options[this.currentIndex];
}
},
getIndexByOffset(offset) {
return range(
Math.round(-offset / this.itemHeight),
0,
this.count - 1
);
},
getEleTransform(ele) {
const { transform } = window.getComputedStyle(ele);
const matrix = transform
.slice(7, transform.length - 1)
.split(', ')
.map(val => Number(val));
return {
scaleX: matrix[0],
skewY: matrix[1],
skewX: matrix[2],
scaleY: matrix[3],
translateX: matrix[4],
translateY: matrix[5]
};
},
momentum(distance, duration) {
const speed = Math.abs(distance / duration);
distance = this.offset + speed / 0.0015 * (distance < 0 ? -1 : 1);
const index = this.getIndexByOffset(distance);
this.duration = MOMENTUM_DURATION;
this.setIndex(index, true);
},
},
render(h) {
@@ -125,8 +228,9 @@ export default sfc({
const baseOffset = (itemHeight * (visibleItemCount - 1)) / 2;
const wrapperStyle = {
transition: `${this.duration}ms`,
transform: `translate3d(0, ${this.offset + baseOffset}px, 0)`,
transitionTimingFunction: 'cubic-bezier(0.23, 1, 0.32, 1)',
transitionDuration: `${this.duration}ms`,
lineHeight: `${itemHeight}px`
};
@@ -143,7 +247,11 @@ export default sfc({
onTouchend={this.onTouchEnd}
onTouchcancel={this.onTouchEnd}
>
<ul style={wrapperStyle}>
<ul
ref="wrapper"
style={wrapperStyle}
onTransitionend={this.onTransitionEnd}
>
{this.options.map((option, index) => (
<li
style={optionStyle}
@@ -155,9 +263,8 @@ export default sfc({
})
]}
domPropsInnerHTML={this.getOptionText(option)}
onClick={() => {
this.setIndex(index, true);
}}
data-index={index}
onClick={this.onClickItem}
/>
))}
</ul>
packages/picker/index.js
+7 -1
View File
@@ -141,6 +141,7 @@ export default sfc({
render(h) {
const { itemHeight } = this;
const wrapHeight = itemHeight * this.visibleItemCount;
const columns = this.simple ? [this.columns] : this.columns;
const frameStyle = {
@@ -148,7 +149,11 @@ export default sfc({
};
const columnsStyle = {
height: `${itemHeight * this.visibleItemCount}px`
height: `${wrapHeight}px`
};
const maskStyle = {
backgroundSize: `100% ${(wrapHeight - itemHeight) / 2}px`
};
const Toolbar = this.showToolbar && (
@@ -186,6 +191,7 @@ export default sfc({
}}
/>
))}
<div class={bem('mask')} style={maskStyle} />
<div class={['van-hairline--top-bottom', bem('frame')]} style={frameStyle} />
</div>
</div>
packages/picker/index.less
+16 -3
View File
@@ -55,12 +55,26 @@
position: absolute;
top: 50%;
left: 0;
z-index: 1;
z-index: 3;
width: 100%;
transform: translateY(-50%);
pointer-events: none;
}
&__mask {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .8), hsla(0, 0%, 100%, .6)),
linear-gradient(0deg, hsla(0, 0%, 100%, .8), hsla(0, 0%, 100%, .6));
background-repeat: no-repeat;
background-position: top, bottom;
pointer-events: none;
}
&-column {
flex: 1;
overflow: hidden;
@@ -69,10 +83,9 @@
&__item {
padding: 0 5px;
color: @picker-option-text-color;
color: @picker-option-selected-text-color;
&--selected {
color: @picker-option-selected-text-color;
font-weight: 500;
}
packages/picker/test/__snapshots__/demo.spec.js.snap
+46 -40
View File
@@ -7,14 +7,15 @@ exports[`renders demo correctly 1`] = `
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column" style="height: 220px;">
<ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
<ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
<li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">杭州</li>
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
<li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
</div>
@@ -24,14 +25,15 @@ exports[`renders demo correctly 1`] = `
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column" style="height: 220px;">
<ul style="transition: 0ms; transform: translate3d(0, 0px, 0); line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
<ul style="transform: translate3d(0, 0px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
<li data-index="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
<li data-index="2" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州</li>
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
</div>
@@ -46,14 +48,15 @@ exports[`renders demo correctly 1`] = `
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column" style="height: 220px;">
<ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
<ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
<li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">杭州</li>
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
<li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
</div>
@@ -63,12 +66,13 @@ exports[`renders demo correctly 1`] = `
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column" style="height: 220px;">
<ul style="transition: 0ms; transform: translate3d(0, 44px, 0); line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
<ul style="transform: translate3d(0, 44px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
<li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 44px;">杭州</li>
<li data-index="1" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">宁波</li>
<li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
</div>
@@ -78,20 +82,21 @@ exports[`renders demo correctly 1`] = `
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column column1" style="height: 220px;">
<ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">浙江</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">福建</li>
<ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
<li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">浙江</li>
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">福建</li>
</ul>
</div>
<div class="van-picker-column column2" style="height: 220px;">
<ul style="transition: 0ms; transform: translate3d(0, 0px, 0); line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
<ul style="transform: translate3d(0, 0px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
<li data-index="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
<li data-index="2" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州</li>
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
</div>
@@ -101,20 +106,21 @@ exports[`renders demo correctly 1`] = `
<div class="van-loading van-loading--circular van-picker__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(25, 137, 250);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column column1" style="height: 220px;">
<ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">浙江</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">福建</li>
<ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
<li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">浙江</li>
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">福建</li>
</ul>
</div>
<div class="van-picker-column column2" style="height: 220px;">
<ul style="transition: 0ms; transform: translate3d(0, 0px, 0); line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
<ul style="transform: translate3d(0, 0px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
<li data-index="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
<li data-index="2" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州</li>
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
</div>
packages/picker/test/__snapshots__/index.spec.js.snap
+17 -16
View File
@@ -2,28 +2,28 @@
exports[`column watch default index 1`] = `
<div class="van-picker-column" style="height: 0px;">
<ul style="transition: 0ms; transform: translate3d(0, -75px, 0); line-height: 50px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">1</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 50px;">1990</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1991</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1992</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1993</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1994</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1995</li>
<ul style="transform: translate3d(0, -75px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 50px;">
<li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">1</li>
<li data-index="1" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 50px;">1990</li>
<li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 50px;">1991</li>
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 50px;">1992</li>
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 50px;">1993</li>
<li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 50px;">1994</li>
<li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 50px;">1995</li>
</ul>
</div>
`;
exports[`column watch default index 2`] = `
<div class="van-picker-column" style="height: 0px;">
<ul style="transition: 0ms; transform: translate3d(0, -125px, 0); line-height: 50px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">1</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1990</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 50px;">1991</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1992</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1993</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1994</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1995</li>
<ul style="transform: translate3d(0, -125px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 50px;">
<li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">1</li>
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 50px;">1990</li>
<li data-index="2" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 50px;">1991</li>
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 50px;">1992</li>
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 50px;">1993</li>
<li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 50px;">1994</li>
<li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 50px;">1995</li>
</ul>
</div>
`;
@@ -35,6 +35,7 @@ exports[`render title slot 1`] = `
</div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
</div>
packages/picker/test/index.spec.js
+53 -4
View File
@@ -80,25 +80,32 @@ test('set picker values', () => {
expect(vm.getColumnValue(2)).toEqual(undefined);
});
test('drag columns', () => {
test('drag columns', async () => {
const wrapper = mount(Picker, {
propsData: {
columns
}
});
triggerDrag(wrapper.find('.van-picker-column'), 0, 0);
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
wrapper.find('.van-picker-column ul').trigger('transitionend');
// 由于在极短的时间（大约几毫秒）移动 `100px`，因此再计算惯性滚动的距离时，
// 会得到一个很大的值，导致会滚动到且选中列表的最后一项
expect(wrapper.emitted('change')[0][1]).toEqual(['normal', '1990']);
});
test('drag simple columns', () => {
test('drag simple columns', async () => {
const wrapper = mount(Picker, {
propsData: {
columns: simpleColumn
}
});
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
expect(wrapper.emitted('change')[0][1]).toEqual('1992');
wrapper.find('.van-picker-column ul').trigger('transitionend');
// 由于在极短的时间（大约几毫秒）移动 `100px`，因此再计算惯性滚动的距离时，
// 会得到一个很大的值，导致会滚动到且选中列表的最后一项
expect(wrapper.emitted('change')[0][1]).toEqual('1995');
});
test('column watch default index', async () => {
@@ -132,3 +139,45 @@ test('render title slot', () => {
expect(wrapper).toMatchSnapshot();
});
test('simulation finger swipe again before transitionend', () => {
// mock getComputedStyle
// see: https://github.com/jsdom/jsdom/issues/2588
const originGetComputedStyle = window.getComputedStyle;
window.getComputedStyle = ele => {
const style = originGetComputedStyle(ele);
return {
...style,
transform: 'matrix(1, 0, 0, 1, 0, -5)'
};
};
const wrapper = mount(Picker, {
propsData: {
columns: simpleColumn
}
});
triggerDrag(wrapper.find('.van-picker-column'), 0, -5);
triggerDrag(wrapper.find('.van-picker-column'), -5, -100);
wrapper.find('.van-picker-column ul').trigger('transitionend');
expect(wrapper.emitted('change')[0][1]).toEqual('1995');
});
test('click column\'s item', () => {
const columns = [
{ text: '杭州' },
{ text: '宁波' },
{ text: '温州', disabled: true },
{ text: '嘉兴', disabled: true }
];
const wrapper = mount(Picker, {
propsData: {
columns
}
});
wrapper.findAll('.van-picker-column__item').at(3).trigger('click');
expect(wrapper.emitted('change')[0][1]).toEqual(columns[1]);
});