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] Tab: line resize (#1304)

Browse Source
This commit is contained in:
neverland 2018-06-19 20:28:00 +08:00 committed by GitHub
parent b479c1daa6
commit 6e25b9823a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 52 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
packages/tabs/index.vue
View File

@ -72,7 +72,12 @@ export default create({
tabs: [], tabs: [],
position: 'content-top', position: 'content-top',
curActive: 0, curActive: 0,
lineStyle: {} lineStyle: {},
events: {
resize: false,
sticky: false,
swipeable: false
}
}; };
}, },
@ -105,8 +110,12 @@ export default create({
} }
}, },
sticky(isSticky) { sticky() {
this.scrollHandler(isSticky); this.handlers(true);
},
swipeable() {
this.handlers(true);
} }
}, },
@ -115,45 +124,57 @@ export default create({
this.setLine(); this.setLine();
this.$nextTick(() => { this.$nextTick(() => {
if (this.sticky) { this.handlers(true);
this.scrollHandler(true);
}
if (this.swipeable) {
this.swipeableHandler(true);
}
this.scrollIntoView(); this.scrollIntoView();
}); });
}, },
activated() {
this.$nextTick(() => {
this.handlers(true);
});
},
deactivated() {
this.handlers(false);
},
beforeDestroy() { beforeDestroy() {
/* istanbul ignore next */ this.handlers(false);
if (this.sticky) {
this.scrollHandler(false);
}
/* istanbul ignore next */
if (this.swipeable) {
this.swipeableHandler(false);
}
}, },
methods: { methods: {
// whether to bind sticky listener // whether to bind sticky listener
scrollHandler(init) { handlers(bind) {
this.scrollEl = this.scrollEl || scrollUtils.getScrollEventTarget(this.$el); const { events } = this;
(init ? on : off)(this.scrollEl, 'scroll', this.onScroll, true); const sticky = this.sticky && bind;
if (init) { const swipeable = this.swipeable && bind;
// listen to window resize event
if (events.resize !== bind) {
events.resize = bind;
(bind ? on : off)(window, 'resize', this.setLine, true);
}
// listen to scroll event
if (events.sticky !== sticky) {
events.sticky = sticky;
this.scrollEl = this.scrollEl || scrollUtils.getScrollEventTarget(this.$el);
(sticky ? on : off)(this.scrollEl, 'scroll', this.onScroll, true);
this.onScroll(); this.onScroll();
} }
},
// whether to bind content swipe listener // listen to touch event
swipeableHandler(init) { if (events.swipeable !== swipeable) {
const { content } = this.$refs; events.swipeable = swipeable;
const action = init ? on : off; const { content } = this.$refs;
action(content, 'touchstart', this.touchStart); const action = swipeable ? on : off;
action(content, 'touchmove', this.touchMove);
action(content, 'touchend', this.onTouchEnd); action(content, 'touchstart', this.touchStart);
action(content, 'touchcancel', this.onTouchEnd); action(content, 'touchmove', this.touchMove);
action(content, 'touchend', this.onTouchEnd);
action(content, 'touchcancel', this.onTouchEnd);
}
}, },
// watch swipe touch end // watch swipe touch end
@ -189,7 +210,7 @@ export default create({
// update nav bar style // update nav bar style
setLine() { setLine() {
this.$nextTick(() => { this.$nextTick(() => {
if (!this.$refs.tabs) { if (!this.$refs.tabs || this.type !== 'line') {
return; return;
} }