diff --git a/packages/picker/PickerColumn.js b/packages/picker/PickerColumn.js
index d427d54d6..ec5608efb 100644
--- a/packages/picker/PickerColumn.js
+++ b/packages/picker/PickerColumn.js
@@ -6,14 +6,25 @@ import { TouchMixin } from '../mixins/touch';
const DEFAULT_DURATION = 200;
// 惯性滑动思路:
-// 在手指离开屏幕时，如果和上一次 move 时的间隔小于 `MOMENTUM_LIMIT_TIME` 且 move 距
-// 离大于 `MOMENTUM_LIMIT_DISTANCE` 时，执行惯性滑动，持续 `MOMENTUM_DURATION`
+// 在手指离开屏幕时，如果和上一次 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');
+function getElementTranslateY(element) {
+ const { transform } = window.getComputedStyle(element);
+ const translateY = transform.slice(7, transform.length - 1).split(', ')[5];
+
+ return Number(translateY);
+}
+
+function isOptionDisabled(option) {
+ return isObj(option) && option.disabled;
+}
+
export default sfc({
mixins: [TouchMixin],
@@ -30,23 +41,25 @@ export default sfc({
return {
offset: 0,
duration: 0,
- startOffset: 0,
- momentumOffset: 0,
- touchTimestamp: 0,
- moving: false,
options: deepClone(this.initialOptions),
currentIndex: this.defaultIndex
};
},
created() {
- this.$parent.children && this.$parent.children.push(this);
+ if (this.$parent.children) {
+ this.$parent.children.push(this);
+ }
+
this.setIndex(this.currentIndex);
},
destroyed() {
const { children } = this.$parent;
- children && children.splice(children.indexOf(this), 1);
+
+ if (children) {
+ children.splice(children.indexOf(this), 1);
+ }
},
watch: {
@@ -66,7 +79,7 @@ export default sfc({
this.touchStart(event);
if (this.moving) {
- const { translateY } = this.getEleTransform(this.$refs.wrapper);
+ const translateY = getElementTranslateY(this.$refs.wrapper);
this.startOffset = Math.min(0, translateY);
} else {
this.startOffset = this.offset;
@@ -75,7 +88,7 @@ export default sfc({
this.duration = 0;
this.moving = false;
this.transitionEndTrigger = null;
- this.touchTimestamp = Date.now();
+ this.touchStartTime = Date.now();
this.momentumOffset = this.startOffset;
},
@@ -90,15 +103,15 @@ export default sfc({
);
const now = Date.now();
- if (now - this.touchTimestamp > MOMENTUM_LIMIT_TIME) {
- this.touchTimestamp = now;
+ if (now - this.touchStartTime > MOMENTUM_LIMIT_TIME) {
+ this.touchStartTime = now;
this.momentumOffset = this.offset;
}
},
onTouchEnd() {
const distance = this.offset - this.momentumOffset;
- const duration = Date.now() - this.touchTimestamp;
+ const duration = Date.now() - this.touchStartTime;
const allowMomentum =
duration < MOMENTUM_LIMIT_TIME &&
Math.abs(distance) > MOMENTUM_LIMIT_DISTANCE;
@@ -124,24 +137,21 @@ export default sfc({
}
},
- onClickItem(e) {
- const index = Number(e.currentTarget.getAttribute('data-index'));
+ onClickItem(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++) {
- if (!this.isDisabled(this.options[i])) return i;
- }
- for (let i = index - 1; i >= 0; i--) {
- if (!this.isDisabled(this.options[i])) return i;
- }
- },
- isDisabled(option) {
- return isObj(option) && option.disabled;
+ for (let i = index; i < this.count; i++) {
+ if (!isOptionDisabled(this.options[i])) return i;
+ }
+
+ for (let i = index - 1; i >= 0; i--) {
+ if (!isOptionDisabled(this.options[i])) return i;
+ }
},
getOptionText(option) {
@@ -155,7 +165,10 @@ export default sfc({
const trigger = () => {
if (index !== this.currentIndex) {
this.currentIndex = index;
- userAction && this.$emit('change', index);
+
+ if (userAction) {
+ this.$emit('change', index);
+ }
}
};
@@ -189,23 +202,6 @@ export default sfc({
);
},
- 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);
@@ -221,15 +217,14 @@ export default sfc({
render(h) {
const { itemHeight, visibleItemCount } = this;
- const columnStyle = {
- height: itemHeight * visibleItemCount + 'px'
- };
-
const baseOffset = (itemHeight * (visibleItemCount - 1)) / 2;
+ const columnStyle = {
+ height: `${itemHeight * visibleItemCount}px`
+ };
+
const wrapperStyle = {
transform: `translate3d(0, ${this.offset + baseOffset}px, 0)`,
- transitionTimingFunction: 'cubic-bezier(0.23, 1, 0.32, 1)',
transitionDuration: `${this.duration}ms`,
lineHeight: `${itemHeight}px`
};
@@ -250,6 +245,7 @@ export default sfc({
{this.options.map((option, index) => (
@@ -258,13 +254,14 @@ export default sfc({
class={[
'van-ellipsis',
bem('item', {
- disabled: this.isDisabled(option),
+ disabled: isOptionDisabled(option),
selected: index === this.currentIndex
})
]}
domPropsInnerHTML={this.getOptionText(option)}
- data-index={index}
- onClick={this.onClickItem}
+ onClick={() => {
+ this.onClickItem(index);
+ }}
/>
))}
diff --git a/packages/picker/index.less b/packages/picker/index.less
index aa04139e6..4ad94e474 100644
--- a/packages/picker/index.less
+++ b/packages/picker/index.less
@@ -81,9 +81,13 @@
font-size: @picker-option-font-size;
text-align: center;
+ &__wrapper {
+ transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+ }
+
&__item {
padding: 0 5px;
- color: @picker-option-selected-text-color;
+ color: @picker-option-text-color;
&--selected {
font-weight: 500;
diff --git a/packages/picker/test/__snapshots__/index.spec.js.snap b/packages/picker/test/__snapshots__/index.spec.js.snap
index d4d0fd849..ca98a9a24 100644
--- a/packages/picker/test/__snapshots__/index.spec.js.snap
+++ b/packages/picker/test/__snapshots__/index.spec.js.snap
@@ -2,28 +2,28 @@
exports[`column watch default index 1`] = `
-
- - 1
- - 1990
- - 1991
- - 1992
- - 1993
- - 1994
- - 1995
+
+ - 1
+ - 1990
+ - 1991
+ - 1992
+ - 1993
+ - 1994
+ - 1995
`;
exports[`column watch default index 2`] = `
-
- - 1
- - 1990
- - 1991
- - 1992
- - 1993
- - 1994
- - 1995
+
+ - 1
+ - 1990
+ - 1991
+ - 1992
+ - 1993
+ - 1994
+ - 1995
`;
diff --git a/packages/style/var.less b/packages/style/var.less
index 8b23ae9f1..dc67dfa51 100644
--- a/packages/style/var.less
+++ b/packages/style/var.less
@@ -362,8 +362,7 @@
@picker-action-text-color: @blue;
@picker-action-active-color: @active-color;
@picker-option-font-size: 16px;
-@picker-option-text-color: @gray-dark;
-@picker-option-selected-text-color: @text-color;
+@picker-option-text-color: @text-color;
@picker-option-disabled-opacity: .3;
// Popup