From 66fbfacf190db1949edeb9de5ecbd50fd2a32901 Mon Sep 17 00:00:00 2001 From: rex Date: Tue, 12 Nov 2019 14:32:36 +0800 Subject: [PATCH] refactor(Tab): refactor component with Sticky (#2285) fix #2253 #2122 Tab support css variables --- example/pages/tab/index.wxml | 2 +- example/pages/tab/index.wxss | 1 + packages/common/style/var.less | 14 ++ packages/sticky/index.less | 8 ++ packages/sticky/index.ts | 143 ++++++-------------- packages/sticky/index.wxml | 6 +- packages/tab/index.ts | 21 ++- packages/tabs/index.json | 3 +- packages/tabs/index.less | 96 ++++++------- packages/tabs/index.ts | 239 +++++++++++---------------------- packages/tabs/index.wxml | 65 ++++----- 11 files changed, 241 insertions(+), 357 deletions(-) diff --git a/example/pages/tab/index.wxml b/example/pages/tab/index.wxml index 62a6a9e2..0fe6f836 100644 --- a/example/pages/tab/index.wxml +++ b/example/pages/tab/index.wxml @@ -57,7 +57,7 @@ - + = {}; - - if (wrapStyle !== this.data.wrapStyle) { - data.wrapStyle = wrapStyle; - } - - if (containerStyle !== this.data.containerStyle) { - data.containerStyle = containerStyle; - } - - if (JSON.stringify(data) !== '{}') { - this.setData(data); - } - }, - - setPosition(position: Position) { - if (position !== this.data.position) { - this.setData({ position }); - nextTick(() => { - this.setWrapStyle(); + if (fixed) { + this.setData({ + wrapStyle: `top: ${offsetTop}px;`, + containerStyle: `height: ${height}px; z-index: ${zIndex};` + }); + } else { + this.setData({ + wrapStyle: '', + containerStyle: '' }); } }, observerContentScroll() { - const { offsetTop = 0 } = this.data; - const { windowHeight } = wx.getSystemInfoSync(); - - this.createIntersectionObserver({}).disconnect(); - - // @ts-ignore - this.createIntersectionObserver() - .relativeToViewport({ top: -(this.itemHeight + offsetTop) }) - .observe( - '.van-sticky', - (res: WechatMiniprogram.ObserveCallbackResult) => { - const { top } = res.boundingClientRect; - - if (top > offsetTop) { - return; - } - - const position: Position = 'top'; - - this.$emit('scroll', { - scrollTop: top + offsetTop, - isFixed: true - }); - - this.setPosition(position); + const { offsetTop } = this.data; + const intersectionObserver = this.createIntersectionObserver({ + thresholds: [0, 1] + }); + this.intersectionObserver = intersectionObserver; + intersectionObserver.relativeToViewport({ top: -offsetTop }); + intersectionObserver.observe( + '.van-sticky', + (res) => { + if (this.data.disabled) { + return; } - ); + // @ts-ignore + const { top, height } = res.boundingClientRect; + const fixed = top <= offsetTop; - // @ts-ignore - this.createIntersectionObserver() - .relativeToViewport({ bottom: -(windowHeight - 1 - offsetTop) }) - .observe( - '.van-sticky', - (res: WechatMiniprogram.ObserveCallbackResult) => { - const { top, bottom } = res.boundingClientRect; + this.$emit('scroll', { + scrollTop: top, + isFixed: fixed + }); - if (bottom <= this.itemHeight - 1) { - return; - } + this.setData({ fixed, height }); - const position: Position = res.intersectionRatio > 0 ? 'top' : ''; - - this.$emit('scroll', { - scrollTop: top + offsetTop, - isFixed: position === 'top' - }); - - this.setPosition(position); - } - ); + wx.nextTick(() => { + this.setStyle(); + }); + } + ); } }, mounted() { - this.getRect('.van-sticky').then( - (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => { - this.itemHeight = rect.height; - this.itemTop = rect.top; - this.observerContentScroll(); - } - ); + this.observerContentScroll(); }, destroyed() { - this.createIntersectionObserver({}).disconnect(); + this.intersectionObserver.disconnect(); } }); diff --git a/packages/sticky/index.wxml b/packages/sticky/index.wxml index 73360c28..036cf143 100644 --- a/packages/sticky/index.wxml +++ b/packages/sticky/index.wxml @@ -1,5 +1,7 @@ - - + + + + diff --git a/packages/tab/index.ts b/packages/tab/index.ts index 5379e4f8..041a4907 100644 --- a/packages/tab/index.ts +++ b/packages/tab/index.ts @@ -3,7 +3,13 @@ import { VantComponent } from '../common/component'; VantComponent({ relation: { name: 'tabs', - type: 'ancestor' + type: 'ancestor', + linked(target) { + this.parent = target; + }, + unlinked() { + this.parent = null; + } }, props: { @@ -15,7 +21,6 @@ VantComponent({ name: { type: [Number, String], value: '', - observer: 'setComputedName' } }, @@ -39,10 +44,16 @@ VantComponent({ this.computedName = this.data.name || this.index; }, + getComputedName() { + if (this.data.name !== '') { + return this.data.name; + } + return this.index; + }, + update() { - const parent = this.getRelationNodes('../tabs/index')[0]; - if (parent) { - parent.updateTabs(); + if (this.parent) { + this.parent.updateTabs(); } } } diff --git a/packages/tabs/index.json b/packages/tabs/index.json index bf0ebe00..19c0bc3a 100644 --- a/packages/tabs/index.json +++ b/packages/tabs/index.json @@ -1,6 +1,7 @@ { "component": true, "usingComponents": { - "van-info": "../info/index" + "van-info": "../info/index", + "van-sticky": "../sticky/index" } } diff --git a/packages/tabs/index.less b/packages/tabs/index.less index ba610011..3f5c0d01 100644 --- a/packages/tabs/index.less +++ b/packages/tabs/index.less @@ -1,29 +1,13 @@ @import '../common/style/var.less'; @import '../common/style/theme.less'; -@tabs-line-height: 44px; -@tabs-card-height: 30px; - .van-tabs { position: relative; -webkit-tap-highlight-color: transparent; &__wrap { - position: absolute; - top: 0; - right: 0; - left: 0; display: flex; - .theme(background-color, '@white'); - - &--page-top { - position: fixed; - } - - &--content-bottom { - top: auto; - bottom: 0; - } + overflow: hidden; &--scrollable { .van-tab { @@ -32,9 +16,17 @@ } } - &__scroll--card { - border-radius: 2px; - .theme(border, '1px solid @red'); + &__scroll { + .theme(background-color, '@tabs-nav-background-color'); + + &--line { + box-sizing: content-box; + height: calc(100% + 15px); /* 15px padding to hide scrollbar in mobile safari */ + } + + &--card { + .theme(margin, '0 @padding-md'); + } } &__nav { @@ -42,17 +34,16 @@ display: flex; user-select: none; - &--line { - height: 100%; - } - &--card { + box-sizing: border-box; .theme(height, '@tabs-card-height'); + .theme(border, '@border-width-base solid @tabs-default-color'); + .theme(border-radius, '@border-radius-sm'); .van-tab { - .theme(color, '@red'); - .theme(line-height, '@tabs-card-height'); - .theme(border-right, '1px solid @red'); + .theme(color, '@tabs-default-color'); + .theme(line-height, 'calc(@tabs-card-height - 2 * @border-width-base)'); + .theme(border-right, '@border-width-base solid @tabs-default-color'); &:last-child { border-right: none; @@ -60,7 +51,11 @@ &.van-tab--active { .theme(color, '@white'); - .theme(background-color, '@red'); + .theme(background-color, '@tabs-default-color'); + } + + &--disabled { + .theme(color, '@tab-disabled-text-color'); } } } @@ -71,34 +66,29 @@ bottom: 0; left: 0; z-index: 1; - height: 3px; - border-radius: 3px; - .theme(background-color, '@red'); + .theme(height, '@tabs-bottom-bar-height'); + .theme(border-radius, '@tabs-bottom-bar-height'); + .theme(background-color, '@tabs-bottom-bar-color'); } - &--line { - .theme(padding-top, '@tabs-line-height'); - - .van-tabs__wrap { - .theme(height, '@tabs-line-height'); - } - } - - &--card { - margin: 0 15px; - .theme(padding-top, '@tabs-card-height'); - - .van-tabs__wrap { - .theme(height, '@tabs-card-height'); - } + &__track { + position: relative; } &__content { overflow: hidden; } - &__track { - position: relative; + &--line { + .van-tabs__wrap { + .theme(height, '@tabs-line-height'); + } + } + + &--card { + .van-tabs__wrap { + .theme(height, '@tabs-card-height'); + } } } @@ -108,19 +98,19 @@ box-sizing: border-box; min-width: 0; /* hack for flex ellipsis */ padding: 0 5px; - font-size: 14px; text-align: center; cursor: pointer; - .theme(color, '@gray-darker'); + .theme(color, '@tab-text-color'); + .theme(font-size, '@tab-font-size'); .theme(line-height, '@tabs-line-height'); &--active { - font-weight: 500; - .theme(color, '@text-color'); + .theme(font-weight, '@font-weight-bold'); + .theme(color, '@tab-active-text-color'); } &--disabled { - .theme(color, '@gray'); + .theme(color, '@tab-disabled-text-color'); } &__title { diff --git a/packages/tabs/index.ts b/packages/tabs/index.ts index 55c1817a..23c393f1 100644 --- a/packages/tabs/index.ts +++ b/packages/tabs/index.ts @@ -4,15 +4,13 @@ import { Weapp } from 'definitions/weapp'; import { nextTick, isDef, addUnit } from '../common/utils'; type TabItemData = { - width?: number - active: boolean - inited?: boolean - animated?: boolean - name?: string | number + width?: number; + active: boolean; + inited?: boolean; + animated?: boolean; + name?: string | number; }; -type Position = 'top' | 'bottom' | ''; - VantComponent({ mixins: [touch], @@ -23,7 +21,6 @@ VantComponent({ type: 'descendant', linked(child) { child.index = this.children.length; - child.setComputedName(); this.children.push(child); this.updateTabs(this.data.tabs.concat(child.data)); }, @@ -37,7 +34,6 @@ VantComponent({ while (i >= 0 && i < this.children.length) { const currentChild = this.children[i]; currentChild.index--; - currentChild.setComputedName(); i++; } @@ -46,21 +42,33 @@ VantComponent({ }, props: { - color: String, + color: { + type: String, + observer: 'setLine' + }, sticky: Boolean, - animated: Boolean, + animated: { + type: Boolean, + observer: 'setTrack' + }, swipeable: Boolean, lineWidth: { type: [String, Number], - value: -1 + value: -1, + observer: 'setLine' }, lineHeight: { type: [String, Number], - value: -1 + value: -1, + observer: 'setLine' }, active: { type: [String, Number], value: 0, + observer(value) { + this.currentName = value; + this.setActiveTab(); + } }, type: { type: String, @@ -80,7 +88,12 @@ VantComponent({ }, swipeThreshold: { type: Number, - value: 4 + value: 4, + observer() { + this.setData({ + scrollable: this.children.length > this.data.swipeThreshold + }); + } }, offsetTop: { type: Number, @@ -96,21 +109,7 @@ VantComponent({ trackStyle: '', wrapStyle: '', position: '', - currentIndex: 0, - }, - - watch: { - swipeThreshold() { - this.setData({ - scrollable: this.children.length > this.data.swipeThreshold - }); - }, - color: 'setLine', - lineWidth: 'setLine', - lineHeight: 'setLine', - active: 'setActiveTab', - animated: 'setTrack', - offsetTop: 'setWrapStyle' + currentIndex: 0 }, beforeCreate() { @@ -121,17 +120,6 @@ VantComponent({ this.setLine(true); this.setTrack(); this.scrollIntoView(); - this.getRect('.van-tabs__wrap').then( - (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => { - this.navHeight = rect.height; - this.observerContentScroll(); - } - ); - }, - - destroyed() { - // @ts-ignore - this.createIntersectionObserver().disconnect(); }, methods: { @@ -156,18 +144,20 @@ VantComponent({ onTap(event: Weapp.Event) { const { index } = event.currentTarget.dataset; const child = this.children[index]; + const computedName = child.getComputedName(); + if (this.data.tabs[index].disabled) { - this.trigger('disabled', child.computedName); + this.trigger('disabled', computedName); } else { - this.trigger('click', child.computedName); - this.setActive(child.computedName); + this.trigger('click', computedName); + this.setActive(computedName); } }, - setActive(computedName) { - if (computedName !== this.currentName) { - this.currentName = computedName; - this.trigger('change', computedName); + setActive(name) { + if (name !== this.currentName) { + this.currentName = name; + this.trigger('change', name); this.setActiveTab(); } }, @@ -177,13 +167,22 @@ VantComponent({ return; } - const { color, duration, currentIndex, lineWidth, lineHeight } = this.data; + const { + color, + duration, + currentIndex, + lineWidth, + lineHeight + } = this.data; this.getRect('.van-tab', true).then( (rects: WechatMiniprogram.BoundingClientRectCallbackResult[]) => { const rect = rects[currentIndex]; const width = lineWidth !== -1 ? lineWidth : rect.width / 2; - const height = lineHeight !== -1 ? `height: ${addUnit(lineHeight)}; border-radius: ${addUnit(lineHeight)};` : ''; + const height = + lineHeight !== -1 + ? `height: ${addUnit(lineHeight)}; border-radius: ${addUnit(lineHeight)};` + : ''; let left = rects .slice(0, currentIndex) @@ -230,34 +229,42 @@ VantComponent({ const data = { width, animated }; - this.children.forEach((item: WechatMiniprogram.Component.TrivialInstance) => { - item.setData(data); - }); + this.children.forEach( + (item: WechatMiniprogram.Component.TrivialInstance) => { + item.setData(data); + } + ); } ); }, setActiveTab() { if (!isDef(this.currentName)) { - this.currentName = this.data.active || (this.children[0] || {}).computedName; + const { active } = this.data; + const { children = [] } = this; + + this.currentName = + active === '' && children.length + ? children[0].getComputedName() + : active; } - this.children.forEach((item: WechatMiniprogram.Component.TrivialInstance, index: number) => { - const data: TabItemData = { - active: item.computedName === this.currentName - }; + this.children.forEach( + (item: WechatMiniprogram.Component.TrivialInstance, index: number) => { + const data: TabItemData = { + active: item.getComputedName() === this.currentName + }; - if (data.active) { - this.setData({ - currentIndex: index - }); - data.inited = true; - } + if (data.active) { + this.setData({ currentIndex: index }); + data.inited = true; + } - if (data.active !== item.data.active) { - item.setData(data); + if (data.active !== item.data.active) { + item.setData(data); + } } - }); + ); nextTick(() => { this.setLine(); @@ -279,8 +286,8 @@ VantComponent({ this.getRect('.van-tabs__nav') ]).then( ([tabRects, navRect]: [ - WechatMiniprogram.BoundingClientRectCallbackResult[], - WechatMiniprogram.BoundingClientRectCallbackResult + WechatMiniprogram.BoundingClientRectCallbackResult[], + WechatMiniprogram.BoundingClientRectCallbackResult ]) => { const tabRect = tabRects[currentIndex]; const offsetLeft = tabRects @@ -317,101 +324,13 @@ VantComponent({ if (direction === 'horizontal' && offsetX >= minSwipeDistance) { if (deltaX > 0 && currentIndex !== 0) { - this.setActive(this.children[currentIndex - 1].computedName); + const child = this.children[currentIndex - 1]; + this.setActive(child.getComputedName()); } else if (deltaX < 0 && currentIndex !== tabs.length - 1) { - this.setActive(this.children[currentIndex + 1].computedName); + const child = this.children[currentIndex - 1]; + this.setActive(child.getComputedName()); } } - }, - - setWrapStyle() { - const { offsetTop, position } = this.data as { - offsetTop: number - position: Position - }; - let wrapStyle: string; - - switch (position) { - case 'top': - wrapStyle = ` - top: ${offsetTop}px; - position: fixed; - `; - break; - case 'bottom': - wrapStyle = ` - top: auto; - bottom: 0; - `; - break; - default: - wrapStyle = ''; - } - - if (wrapStyle !== this.data.wrapStyle) { - this.setData({ wrapStyle }); - } - }, - - observerContentScroll() { - if (!this.data.sticky) { - return; - } - - const { offsetTop } = this.data; - const { windowHeight } = wx.getSystemInfoSync(); - - // @ts-ignore - this.createIntersectionObserver().disconnect(); - - // @ts-ignore - this.createIntersectionObserver() - .relativeToViewport({ top: -(this.navHeight + offsetTop) }) - .observe('.van-tabs', (res: WechatMiniprogram.ObserveCallbackResult) => { - const { top } = res.boundingClientRect; - - if (top > offsetTop) { - return; - } - - const position: Position = - res.intersectionRatio > 0 ? 'top' : 'bottom'; - - this.$emit('scroll', { - scrollTop: top + offsetTop, - isFixed: position === 'top' - }); - - this.setPosition(position); - }); - - // @ts-ignore - this.createIntersectionObserver() - .relativeToViewport({ bottom: -(windowHeight - 1 - offsetTop) }) - .observe('.van-tabs', (res: WechatMiniprogram.ObserveCallbackResult) => { - const { top, bottom } = res.boundingClientRect; - - if (bottom < this.navHeight) { - return; - } - - const position: Position = res.intersectionRatio > 0 ? 'top' : ''; - - this.$emit('scroll', { - scrollTop: top + offsetTop, - isFixed: position === 'top' - }); - - this.setPosition(position); - }); - }, - - setPosition(position: Position) { - if (position !== this.data.position) { - this.set({ position }).then(() => { - this.setWrapStyle(); - }); - } } } }); diff --git a/packages/tabs/index.wxml b/packages/tabs/index.wxml index fd0a738f..e168bd04 100644 --- a/packages/tabs/index.wxml +++ b/packages/tabs/index.wxml @@ -1,41 +1,44 @@ - - + + + - - - - - - {{ item.title }} - + + + + + + {{ item.title }} + + - - + + + + + - -