From ee3bf31ff22215cbe8d1ffb851e048290f21d551 Mon Sep 17 00:00:00 2001 From: ShuaiKang Zhang Date: Fri, 27 Sep 2019 17:47:38 +0800 Subject: [PATCH] feat(Tab): improve the prop of Tab (#2082) --- example/pages/tab/index.js | 13 +++-- example/pages/tab/index.wxml | 33 ++++++++--- packages/common/utils.ts | 2 +- packages/tab/README.md | 34 ++++++++---- packages/tab/index.ts | 11 +++- packages/tabs/index.less | 12 ---- packages/tabs/index.ts | 104 +++++++++++++++++++++-------------- packages/tabs/index.wxml | 9 +-- 8 files changed, 136 insertions(+), 82 deletions(-) diff --git a/example/pages/tab/index.js b/example/pages/tab/index.js index d45150e8..a1632646 100644 --- a/example/pages/tab/index.js +++ b/example/pages/tab/index.js @@ -3,19 +3,24 @@ import Page from '../../common/page'; Page({ data: { tabs: [1, 2, 3, 4], - tabsMore: [1, 2, 3, 4, 5, 6, 7, 8] + tabsMore: [1, 2, 3, 4, 5, 6, 7, 8], + tabsWithName: [ + { name: 'a', index: 1 }, + { name: 'b', index: 2 }, + { name: 'c', index: 3 } + ] }, onClickDisabled(event) { wx.showToast({ - title: `标签 ${event.detail.index + 1} 已被禁用`, + title: `标签 ${event.detail.name} 已被禁用`, icon: 'none' }); }, onChange(event) { wx.showToast({ - title: `切换到标签 ${event.detail.index + 1}`, + title: `切换到标签 ${event.detail.name}`, icon: 'none' }); }, @@ -29,7 +34,7 @@ Page({ onClick(event) { wx.showToast({ - title: `点击标签 ${event.detail.index + 1}`, + title: `点击标签 ${event.detail.name}`, icon: 'none' }); } diff --git a/example/pages/tab/index.wxml b/example/pages/tab/index.wxml index 5f11f1b5..62a6a9e2 100644 --- a/example/pages/tab/index.wxml +++ b/example/pages/tab/index.wxml @@ -3,7 +3,7 @@ {{ '内容' + item }} @@ -12,12 +12,27 @@ + + + + + {{ '内容' + item.index}} + + + + + {{ '内容' + item }} @@ -32,7 +47,7 @@ wx:for="123" wx:key="index" disabled="{{ index === 1 }}" - title="{{ '标签' + item }}" + title="{{ '标签 ' + item }}" > {{ '内容' + item }} @@ -46,7 +61,7 @@ {{ '内容' + item }} @@ -60,7 +75,7 @@ {{ '内容' + item }} @@ -74,7 +89,7 @@ {{ '内容' + item }} @@ -88,7 +103,7 @@ {{ '内容' + item }} @@ -102,7 +117,7 @@ {{ '内容' + item }} @@ -122,7 +137,7 @@ diff --git a/packages/common/utils.ts b/packages/common/utils.ts index 08fca140..59fa35c7 100644 --- a/packages/common/utils.ts +++ b/packages/common/utils.ts @@ -8,7 +8,7 @@ export function isObj(x: any): boolean { } export function isNumber(value) { - return /^\d+$/.test(value); + return /^\d+(\.\d+)?$/.test(value); } export function range(num: number, min: number, max: number) { diff --git a/packages/tab/README.md b/packages/tab/README.md index b4f57dcb..301867b3 100644 --- a/packages/tab/README.md +++ b/packages/tab/README.md @@ -15,7 +15,7 @@ ### 基础用法 -默认情况下启用第一个标签，可以通过`active`设定当前激活的标签索引，在回调参数的`event.detail`中可以取得被点击标签的标题和索引 +通过`active`设定当前激活标签对应的索引值，默认情况下启用第一个标签 ```html @@ -34,13 +34,25 @@ Page({ onChange(event) { wx.showToast({ - title: `切换到标签 ${event.detail.index + 1}`, + title: `切换到标签 ${event.detail.name}`, icon: 'none' }); } }); ``` +### 通过名称匹配 + +在标签指定`name`属性的情况下，`active`的值为当前标签的`name`，默认启用第一个标签 + +```html + + 内容 1 + 内容 2 + 内容 3 + +``` + ### 横向滚动 多于 4 个标签时，Tab 可以横向滚动 @@ -72,7 +84,7 @@ Page({ Page({ onClickDisabled(event) { wx.showToast({ - title: `标签 ${event.detail.index + 1} 已被禁用`, + title: `标签 ${event.detail.name} 已被禁用`, icon: 'none' }); } @@ -93,7 +105,7 @@ Page({ ### 点击事件 -可以在`van-tabs`上绑定`click`事件，在回调参数的`event.detail`中可以取得被点击标签的标题和索引 +可以在`van-tabs`上绑定`click`事件，在回调参数的`event.detail`中可以取得被点击标签的标题和标识符 ```html @@ -106,7 +118,7 @@ Page({ Page({ onClick(event) { wx.showToast({ - title: `点击标签 ${event.detail.index + 1}`, + title: `点击标签 ${event.detail.name}`, icon: 'none' }); } @@ -158,13 +170,14 @@ Page({ | 参数 | 说明 | 类型 | 默认值 | 版本 | |-----------|-----------|-----------|-------------|-------------| -| active | 当前激活标签的索引 | *number* | `0` | - | +| active | 当前选中标签的标识符 | *string \| number* | `0` | - | | color | 标签颜色 | *string* | `#ee0a24` | - | | z-index | z-index 层级 | *number* | `1` | - | | type | 样式风格，可选值为`card` | *string* | `line` | - | | border | 是否展示外边框，仅在`line`风格下生效 | *boolean* | `true` | - | | duration | 动画时间 (单位秒) | *number* | `0.3` | - | -| line-width | 底部条宽度 (px) | *number* | 与当前标签等宽 | - | +| line-width | 底部条宽度 (px) | *string \| number* | 与当前标签等宽 | - | +| line-height | 底部条高度 (px) | *string \| number* | `3px` | - | | swipe-threshold | 滚动阈值，设置标签数量超过多少个可滚动 | *number* | `4` | - | | animated | 是否使用动画切换 Tabs | *boolean* | `false` | - | | swipeable | 是否开启手势滑动切换 | *boolean* | `false` | - | @@ -174,6 +187,7 @@ Page({ | 参数 | 说明 | 类型 | 默认值 | 版本 | |-----------|-----------|-----------|-------------|-------------| +| name | 标签名称，作为匹配的标识符 | *string \| number* | 标签的索引值 | - | | title | 标题 | *string* | - | - | | disabled | 是否禁用标签 | *boolean* | `false` | - | | dot | 是否显示小红点 | *boolean* | - | - | @@ -197,9 +211,9 @@ Page({ | 事件名 | 说明 | 参数 | |-----------|-----------|-----------| -| bind:click | 点击标签时触发 | index：标签索引，title：标题 | -| bind:change | 当前激活的标签改变时触发 | index：标签索引，title：标题 | -| bind:disabled | 点击被禁用的标签时触发 | index：标签索引，title：标题 | +| bind:click | 点击标签时触发 | name：标签标识符，title：标题 | +| bind:change | 当前激活的标签改变时触发 | name：标签标识符，title：标题 | +| bind:disabled | 点击被禁用的标签时触发 | name：标签标识符，title：标题 | | bind:scroll | 滚动时触发 | { scrollTop: 距离顶部位置, isFixed: 是否吸顶 } | ### 外部样式类 diff --git a/packages/tab/index.ts b/packages/tab/index.ts index 00889864..5379e4f8 100644 --- a/packages/tab/index.ts +++ b/packages/tab/index.ts @@ -11,7 +11,12 @@ VantComponent({ info: null, title: String, disabled: Boolean, - titleStyle: String + titleStyle: String, + name: { + type: [Number, String], + value: '', + observer: 'setComputedName' + } }, data: { @@ -30,6 +35,10 @@ VantComponent({ }, methods: { + setComputedName() { + this.computedName = this.data.name || this.index; + }, + update() { const parent = this.getRelationNodes('../tabs/index')[0]; if (parent) { diff --git a/packages/tabs/index.less b/packages/tabs/index.less index 23cff1a7..ba610011 100644 --- a/packages/tabs/index.less +++ b/packages/tabs/index.less @@ -124,18 +124,6 @@ } &__title { - &--dot { - &::after { - display: inline-block; - width: 8px; - height: 8px; - vertical-align: middle; - border-radius: 100%; - content: ''; - .theme(background-color, '@red'); - } - } - &__info { position: relative !important; top: -1px !important; diff --git a/packages/tabs/index.ts b/packages/tabs/index.ts index 98f7f5d7..6c13e522 100644 --- a/packages/tabs/index.ts +++ b/packages/tabs/index.ts @@ -1,13 +1,14 @@ import { VantComponent } from '../common/component'; import { touch } from '../mixins/touch'; import { Weapp } from 'definitions/weapp'; -import { nextTick } from '../common/utils'; +import { nextTick, isDef, addUnit } from '../common/utils'; type TabItemData = { width?: number active: boolean inited?: boolean animated?: boolean + name?: string | number }; type Position = 'top' | 'bottom' | ''; @@ -21,14 +22,25 @@ VantComponent({ name: 'tab', type: 'descendant', linked(child) { - this.child.push(child); + child.index = this.children.length; + child.setComputedName(); + this.children.push(child); this.updateTabs(this.data.tabs.concat(child.data)); }, unlinked(child) { - const index = this.child.indexOf(child); + const index = this.children.indexOf(child); const { tabs } = this.data; tabs.splice(index, 1); - this.child.splice(index, 1); + this.children.splice(index, 1); + + let i = index; + while (i >= 0 && i < this.children.length) { + const currentChild = this.children[i]; + currentChild.index--; + currentChild.setComputedName(); + i++; + } + this.updateTabs(tabs); } }, @@ -39,16 +51,16 @@ VantComponent({ animated: Boolean, swipeable: Boolean, lineWidth: { - type: Number, + type: [String, Number], value: -1 }, lineHeight: { - type: Number, + type: [String, Number], value: -1 }, active: { - type: Number, - value: 0 + type: [String, Number], + value: 0, }, type: { type: String, @@ -83,13 +95,14 @@ VantComponent({ scrollable: false, trackStyle: '', wrapStyle: '', - position: '' + position: '', + currentIndex: null, }, watch: { swipeThreshold() { this.setData({ - scrollable: this.child.length > this.data.swipeThreshold + scrollable: this.children.length > this.data.swipeThreshold }); }, color: 'setLine', @@ -101,14 +114,13 @@ VantComponent({ }, beforeCreate() { - this.child = []; + this.children = []; }, mounted() { this.setLine(true); this.setTrack(); this.scrollIntoView(); - this.getRect('.van-tabs__wrap').then( (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => { this.navHeight = rect.height; @@ -132,27 +144,30 @@ VantComponent({ this.setActiveTab(); }, - trigger(eventName: string, index: number) { + trigger(eventName: string, name: string | number) { + const { tabs, currentIndex } = this.data; + this.$emit(eventName, { - index, - title: this.data.tabs[index].title + name, + title: tabs[currentIndex].title }); }, onTap(event: Weapp.Event) { const { index } = event.currentTarget.dataset; + const child = this.children[index]; if (this.data.tabs[index].disabled) { - this.trigger('disabled', index); + this.trigger('disabled', child.computedName); } else { - this.trigger('click', index); - this.setActive(index); + this.trigger('click', child.computedName); + this.setActive(child.computedName); } }, - setActive(active: number) { - if (active !== this.data.active) { - this.trigger('change', active); - this.setData({ active }); + setActive(computedName) { + if (computedName !== this.currentName) { + this.currentName = computedName; + this.trigger('change', computedName); this.setActiveTab(); } }, @@ -162,16 +177,16 @@ VantComponent({ return; } - const { color, active, duration, lineWidth, lineHeight } = this.data; + const { color, duration, currentIndex, lineWidth, lineHeight } = this.data; this.getRect('.van-tab', true).then( (rects: WechatMiniprogram.BoundingClientRectCallbackResult[]) => { - const rect = rects[active]; + const rect = rects[currentIndex]; const width = lineWidth !== -1 ? lineWidth : rect.width / 2; - const height = lineHeight !== -1 ? `height: ${lineHeight}px;` : ''; + const height = lineHeight !== -1 ? `height: ${addUnit(lineHeight)}; border-radius: ${addUnit(lineHeight)};` : ''; let left = rects - .slice(0, active) + .slice(0, currentIndex) .reduce((prev, curr) => prev + curr.width, 0); left += (rect.width - width) / 2; @@ -183,7 +198,7 @@ VantComponent({ this.setData({ lineStyle: ` ${height} - width: ${width}px; + width: ${addUnit(width)}; background-color: ${color}; -webkit-transform: translateX(${left}px); transform: translateX(${left}px); @@ -195,7 +210,7 @@ VantComponent({ }, setTrack() { - const { animated, active, duration } = this.data; + const { animated, duration, currentIndex } = this.data; if (!animated) return ''; @@ -205,8 +220,8 @@ VantComponent({ this.setData({ trackStyle: ` - width: ${width * this.child.length}px; - left: ${-1 * active * width}px; + width: ${width * this.children.length}px; + left: ${-1 * currentIndex * width}px; transition: left ${duration}s; display: -webkit-box; display: flex; @@ -215,7 +230,7 @@ VantComponent({ const data = { width, animated }; - this.child.forEach((item: WechatMiniprogram.Component.TrivialInstance) => { + this.children.forEach((item: WechatMiniprogram.Component.TrivialInstance) => { item.setData(data); }); } @@ -223,12 +238,19 @@ VantComponent({ }, setActiveTab() { - this.child.forEach((item: WechatMiniprogram.Component.TrivialInstance, index: number) => { + if (!isDef(this.currentName)) { + this.currentName = this.data.active || this.children[0].computedName; + } + + this.children.forEach((item: WechatMiniprogram.Component.TrivialInstance, index: number) => { const data: TabItemData = { - active: index === this.data.active + active: item.computedName === this.currentName }; if (data.active) { + this.setData({ + currentIndex: index + }); data.inited = true; } @@ -246,7 +268,7 @@ VantComponent({ // scroll active tab into view scrollIntoView() { - const { active, scrollable } = this.data; + const { currentIndex, scrollable } = this.data; if (!scrollable) { return; @@ -260,9 +282,9 @@ VantComponent({ WechatMiniprogram.BoundingClientRectCallbackResult[], WechatMiniprogram.BoundingClientRectCallbackResult ]) => { - const tabRect = tabRects[active]; + const tabRect = tabRects[currentIndex]; const offsetLeft = tabRects - .slice(0, active) + .slice(0, currentIndex) .reduce((prev, curr) => prev + curr.width, 0); this.setData({ @@ -288,16 +310,16 @@ VantComponent({ onTouchEnd() { if (!this.data.swipeable) return; - const { active, tabs } = this.data; + const { tabs, currentIndex } = this.data; const { direction, deltaX, offsetX } = this; const minSwipeDistance = 50; if (direction === 'horizontal' && offsetX >= minSwipeDistance) { - if (deltaX > 0 && active !== 0) { - this.setActive(active - 1); - } else if (deltaX < 0 && active !== tabs.length - 1) { - this.setActive(active + 1); + if (deltaX > 0 && currentIndex !== 0) { + this.setActive(this.children[currentIndex - 1].computedName); + } else if (deltaX < 0 && currentIndex !== tabs.length - 1) { + this.setActive(this.children[currentIndex + 1].computedName); } } }, diff --git a/packages/tabs/index.wxml b/packages/tabs/index.wxml index 1618d641..fd0a738f 100644 --- a/packages/tabs/index.wxml +++ b/packages/tabs/index.wxml @@ -17,15 +17,16 @@ wx:for="{{ tabs }}" wx:key="index" data-index="{{ index }}" - class="van-ellipsis tab-class {{ index === active ? 'tab-active-class' : '' }} {{ utils.bem('tab', { active: index === active, disabled: item.disabled }) }}" - style="{{ color && index !== active && type === 'card' && !item.disabled ? 'color: ' + color : '' }} {{ color && index === active && type === 'card' ? ';background-color:' + color : '' }} {{ color ? ';border-color: ' + color : '' }} {{ scrollable ? ';flex-basis:' + (88 / swipeThreshold) + '%' : '' }}" + class="van-ellipsis tab-class {{ index === currentIndex ? 'tab-active-class' : '' }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled }) }}" + style="{{ color && index !== currentIndex && type === 'card' && !item.disabled ? 'color: ' + color : '' }} {{ color && index === currentIndex && type === 'card' ? ';background-color:' + color : '' }} {{ color ? ';border-color: ' + color : '' }} {{ scrollable ? ';flex-basis:' + (88 / swipeThreshold) + '%' : '' }}" bind:tap="onTap" > - + {{ item.title }}