ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-19 18:14:13 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

[Improvement] add touch mixin (#869)

Browse Source
This commit is contained in:
neverland
2018-04-13 15:26:41 +08:00
committed by GitHub
parent 7285632c35
commit bd80fe4e05
7 changed files with 66 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/tabs/index.vue
View File

@@ -38,10 +38,13 @@ import { raf } from '../utils/raf';
import { on, off } from '../utils/event';
import VanNode from '../utils/node';
import scrollUtils from '../utils/scroll';
import Touch from '../mixins/touch';
export default create({
name: 'tabs',
mixins: [Touch],
components: {
VanNode
},
@@ -148,22 +151,10 @@ export default create({
swipeableHandler(init) {
const swipeableEl = this.$refs.content;
(init ? on : off)(swipeableEl, 'touchstart', this.onTouchStart, false);
(init ? on : off)(swipeableEl, 'touchmove', this.onTouchMove, false);
(init ? on : off)(swipeableEl, 'touchend', this.onTouchEnd, false);
(init ? on : off)(swipeableEl, 'touchcancel', this.onTouchEnd, false);
},
// record swipe touch start position
onTouchStart(event) {
this.startX = event.touches[0].clientX;
this.startY = event.touches[0].clientY;
},
// watch swipe touch move
onTouchMove(event) {
this.deltaX = event.touches[0].clientX - this.startX;
this.direction = this.getDirection(event.touches[0]);
(init ? on : off)(swipeableEl, 'touchstart', this.touchStart);
(init ? on : off)(swipeableEl, 'touchmove', this.touchMove);
(init ? on : off)(swipeableEl, 'touchend', this.onTouchEnd);
(init ? on : off)(swipeableEl, 'touchcancel', this.onTouchEnd);
},
// watch swipe touch end
@@ -172,7 +163,7 @@ export default create({
const minSwipeDistance = 50;
/* istanbul ignore else */
if (direction === 'horizontal' && Math.abs(deltaX) >= minSwipeDistance) {
if (direction === 'horizontal' && this.offsetX >= minSwipeDistance) {
/* istanbul ignore else */
if (deltaX > 0 && curActive !== 0) {
this.curActive = curActive - 1;
@@ -182,13 +173,6 @@ export default create({
}
},
// get swipe direction
getDirection(touch) {
const distanceX = Math.abs(touch.clientX - this.startX);
const distanceY = Math.abs(touch.clientY - this.startY);
return distanceX > distanceY ? 'horizontal' : distanceX < distanceY ? 'vertical' : '';
},
// adjust tab position
onScroll() {
const scrollTop = scrollUtils.getScrollTop(this.scrollEl);