diff --git a/packages/mixins/touch.js b/packages/mixins/touch.js index 5d9e81ddc..b39fc8356 100644 --- a/packages/mixins/touch.js +++ b/packages/mixins/touch.js @@ -1,4 +1,21 @@ +const MIN_DISTANCE = 10; +function getDirection(x, y) { + if (x > y && x > MIN_DISTANCE) { + return 'horizontal'; + } + if (y > x && y > MIN_DISTANCE) { + return 'vertical'; + } + return ''; +} + export default { + data() { + return { + direction: '' + }; + }, + methods: { touchStart(event) { this.resetTouchStatus(); @@ -12,7 +29,7 @@ export default { this.deltaY = touch.clientY - this.startY; this.offsetX = Math.abs(this.deltaX); this.offsetY = Math.abs(this.deltaY); - this.direction = this.offsetX > this.offsetY ? 'horizontal' : this.offsetX < this.offsetY ? 'vertical' : ''; + this.direction = this.direction || getDirection(this.offsetX, this.offsetY); }, resetTouchStatus() { diff --git a/packages/pull-refresh/test/index.spec.js b/packages/pull-refresh/test/index.spec.js index 60569ede7..bcdeeb1e5 100644 --- a/packages/pull-refresh/test/index.spec.js +++ b/packages/pull-refresh/test/index.spec.js @@ -16,7 +16,7 @@ test('change head content when pulling down', () => { // pulling trigger(track, 'touchstart', 0, 0); - trigger(track, 'touchmove', 0, 10); + trigger(track, 'touchmove', 0, 20); expect(wrapper).toMatchSnapshot(); // loosing diff --git a/packages/swipe/index.vue b/packages/swipe/index.vue index 706127f90..f3dd60e22 100644 --- a/packages/swipe/index.vue +++ b/packages/swipe/index.vue @@ -130,6 +130,11 @@ export default create({ return (this.active + this.count) % this.count; }, + isCorrectDirection() { + const expect = this.vertical ? 'vertical' : 'horizontal'; + return this.direction === expect; + }, + trackStyle() { const mainAxis = this.vertical ? 'height' : 'width'; const crossAxis = this.vertical ? 'width' : 'height'; @@ -178,10 +183,7 @@ export default create({ this.touchMove(event); - if ( - (this.vertical && this.direction === 'vertical') || - this.direction === 'horizontal' - ) { + if (this.isCorrectDirection) { event.preventDefault(); event.stopPropagation(); this.move(0, Math.min(Math.max(this.delta, -this.size), this.size)); @@ -191,9 +193,9 @@ export default create({ onTouchEnd() { if (!this.touchable || !this.swiping) return; - if (this.delta) { + if (this.delta && this.isCorrectDirection) { const offset = this.vertical ? this.offsetY : this.offsetX; - this.move(offset > 50 ? (this.delta > 0 ? -1 : 1) : 0); + this.move(offset > 0 ? (this.delta > 0 ? -1 : 1) : 0); } this.swiping = false; @@ -204,14 +206,18 @@ export default create({ const { delta, active, count, swipes, trackSize } = this; const atFirst = active === 0; const atLast = active === count - 1; - const outOfBounds = !this.loop && ((atFirst && (offset > 0 || move < 0)) || (atLast && (offset < 0 || move > 0))); + const outOfBounds = + !this.loop && + ((atFirst && (offset > 0 || move < 0)) || + (atLast && (offset < 0 || move > 0))); if (outOfBounds || count <= 1) { return; } - swipes[0].offset = (atLast && (delta < 0 || move > 0)) ? trackSize : 0; - swipes[count - 1].offset = (atFirst && (delta > 0 || move < 0)) ? -trackSize : 0; + swipes[0].offset = atLast && (delta < 0 || move > 0) ? trackSize : 0; + swipes[count - 1].offset = + atFirst && (delta > 0 || move < 0) ? -trackSize : 0; if (move && active + move >= -1 && active + move <= count) { this.active += move; @@ -225,7 +231,7 @@ export default create({ this.correctPosition(); setTimeout(() => { this.swiping = false; - this.move(index % this.count - this.active); + this.move((index % this.count) - this.active); }, 30); }, diff --git a/packages/switch/zh-CN.md b/packages/switch/zh-CN.md index 2d4e13283..800258c0c 100644 --- a/packages/switch/zh-CN.md +++ b/packages/switch/zh-CN.md @@ -75,8 +75,8 @@ export default { | loading | 是否为加载状态 | `Boolean` | `false` | - | | disabled | 是否为禁用状态 | `Boolean` | `false` | - | | size | 开关尺寸 | `String` | `30px` | 1.0.0 | -| active-color | 打开时的背景色 | `String` | `#1989fa` | 1.3.11 | -| inactive-color | 关闭时的背景色 | `String` | `#fff` | 1.3.11 | +| active-color | 打开时的背景色 | `String` | `#1989fa` | 1.4.2 | +| inactive-color | 关闭时的背景色 | `String` | `#fff` | 1.4.2 | ### Event