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