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

[improvement] Picker: stop momentum before emit confim event (#3411)

Browse Source
This commit is contained in:
流采
2019-05-31 09:30:56 +08:00
committed by neverland
parent e8daae912a
commit ba6dbcd673
8 changed files with 75 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/picker/PickerColumn.js
+12 -7
View File
@@ -129,13 +129,7 @@ export default sfc({
},
onTransitionEnd() {
this.moving = false;
if (this.transitionEndTrigger) {
this.duration = DEFAULT_DURATION;
this.transitionEndTrigger();
this.transitionEndTrigger = null;
}
this.stopMomentum();
},
onClickItem(index) {
@@ -213,6 +207,16 @@ export default sfc({
this.duration = MOMENTUM_DURATION;
this.setIndex(index, true);
},
stopMomentum() {
this.moving = false;
this.duration = 0;
if (this.transitionEndTrigger) {
this.transitionEndTrigger();
this.transitionEndTrigger = null;
}
}
},
render(h) {
@@ -223,6 +227,7 @@ export default sfc({
const wrapperStyle = {
transform: `translate3d(0, ${this.offset + baseOffset}px, 0)`,
transitionDuration: `${this.duration}ms`,
transitionProperty: this.duration ? 'transform' : 'none',
lineHeight: `${itemHeight}px`
};
packages/picker/index.js
+1
View File
@@ -131,6 +131,7 @@ export default sfc({
},
onConfirm() {
this.children.map(child => child.stopMomentum());
this.emit('confirm');
},
packages/picker/test/__snapshots__/demo.spec.js.snap
+8 -8
View File
@@ -7,7 +7,7 @@ exports[`renders demo correctly 1`] = `
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; 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" style="height: 44px;">温州</li>
@@ -25,7 +25,7 @@ exports[`renders demo correctly 1`] = `
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; line-height: 44px;">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; 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" style="height: 44px;">温州</li>
@@ -48,7 +48,7 @@ exports[`renders demo correctly 1`] = `
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; 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" style="height: 44px;">温州</li>
@@ -66,7 +66,7 @@ exports[`renders demo correctly 1`] = `
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; line-height: 44px;">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; 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" style="height: 44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
@@ -82,13 +82,13 @@ exports[`renders demo correctly 1`] = `
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column column1">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; 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>
</ul>
</div>
<div class="van-picker-column column2">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; line-height: 44px;">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; 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" style="height: 44px;">温州</li>
@@ -106,13 +106,13 @@ 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">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; 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>
</ul>
</div>
<div class="van-picker-column column2">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; line-height: 44px;">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; 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" style="height: 44px;">温州</li>
packages/picker/test/__snapshots__/index.spec.js.snap
+2 -2
View File
@@ -2,7 +2,7 @@
exports[`column watch default index 1`] = `
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, -75px, 0); transition-duration: 0ms; line-height: 50px;">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, -75px, 0); transition-duration: 0ms; transition-property: none; 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" style="height: 50px;">1991</li>
@@ -16,7 +16,7 @@ exports[`column watch default index 1`] = `
exports[`column watch default index 2`] = `
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, -125px, 0); transition-duration: 0ms; line-height: 50px;">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, -125px, 0); transition-duration: 0ms; transition-property: none; 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" style="height: 50px;">1991</li>