blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[Improvement] Tabs: use touchend event to handle swipe (#695)

Browse Source
This commit is contained in:
张敏 2018-03-15 14:13:26 +08:00 committed by neverland
parent 5cdf3b1d79
commit e366e033ed
2 changed files with 32 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
packages/tabs/index.vue
View File

@ -72,11 +72,7 @@ export default create({
tabs: [],
position: 'content-top',
curActive: 0,
navBarStyle: {},
pos: {
x: 0,
y: 0
}
navBarStyle: {}
};
},
@ -152,42 +148,48 @@ export default create({
swipeableHandler(init) {
const swipeableEl = this.$refs.content;
this.touchMoveHandler = scrollUtils.debounce(this.watchTouchMove.bind(this), 500);
(init ? on : off)(swipeableEl, 'touchstart', this.recordTouchStartPosition, true);
(init ? on : off)(swipeableEl, 'touchmove', this.touchMoveHandler, true);
(init ? on : off)(swipeableEl, 'touchstart', this.onTouchStart, false);
(init ? on : off)(swipeableEl, 'touchmove', this.onTouchMove, false);
(init ? on : off)(swipeableEl, 'touchend', this.onTouchEnd, false);
},
// record swipe touch start position
recordTouchStartPosition(e) {
this.pos = {
x: e.touches[0].clientX,
y: e.touches[0].clientY
};
onTouchStart(event) {
this.startX = event.touches[0].clientX;
this.startY = event.touches[0].clientY;
},
// watch swipe touch move
watchTouchMove(e) {
const { pos } = this;
const dx = e.touches[0].clientX - pos.x;
const dy = e.touches[0].clientY - pos.y;
const isForward = dx > 0;
const isHorizontal = Math.abs(dy) < Math.abs(dx);
onTouchMove(event) {
event.preventDefault();
this.deltaX = event.touches[0].clientX - this.startX;
this.direction = this.getDirection(event.touches[0]);
},
// watch swipe touch end
onTouchEnd(event) {
event.preventDefault();
const { direction, deltaX, curActive } = this;
const minSwipeDistance = 50;
/* istanbul ignore else */
if (isHorizontal && Math.abs(dx) >= minSwipeDistance) {
const active = +this.curActive;
if (direction === 'horizontal' && Math.abs(deltaX) >= minSwipeDistance) {
/* istanbul ignore else */
if (isForward && active !== 0) {
this.curActive = active - 1;
} else if (!isForward && active !== this.tabs.length - 1) {
this.curActive = active + 1;
if (deltaX > 0 && curActive !== 0) {
this.curActive = curActive - 1;
} else if (deltaX < 0 && curActive !== this.tabs.length - 1) {
this.curActive = curActive + 1;
}
}
},
// 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);

3
test/specs/tabs.spec.js
View File

@ -147,12 +147,15 @@ describe('Tabs', () => {
wrapper.vm.$nextTick(() => {
triggerTouch(tabContent, 'touchstart', 0, 0);
triggerTouch(tabContent, 'touchmove', -100, 0);
triggerTouch(tabContent, 'touchend', 0, 0);
setTimeout(() => {
expect(tabsContainer.vNode.child.curActive).to.equal(1);
triggerTouch(tabContent, 'touchstart', 0, 0);
triggerTouch(tabContent, 'touchmove', 100, 0);
triggerTouch(tabContent, 'touchend', 0, 0);
setTimeout(() => {
expect(tabsContainer.vNode.child.curActive).to.equal(0);
done();