alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 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/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]);
});