diff --git a/src/common/template/badge.wxml b/src/common/template/badge.wxml new file mode 100644 index 000000000..ade19cbae --- /dev/null +++ b/src/common/template/badge.wxml @@ -0,0 +1,16 @@ + diff --git a/src/tabs/README.en-US.md b/src/tabs/README.en-US.md index cb5f68b79..cae509968 100644 --- a/src/tabs/README.en-US.md +++ b/src/tabs/README.en-US.md @@ -12,8 +12,9 @@ show-bottom-line | Boolean | true | \- | N sticky | Boolean | false | \- | N sticky-props | Object | - | Typescript：`StickyProps`，[Sticky API Documents](./sticky?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N swipeable | Boolean | true | \- | N -value | String / Number | - | Typescript：`TabValue` `type TabValue = string | number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N -default-value | String / Number | undefined | uncontrolled property。Typescript：`TabValue` `type TabValue = string | number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N +theme | String | 'line' | options：line/tag/card | N +value | String / Number | - | Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N +default-value | String / Number | undefined | uncontrolled property。Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N ### Tabs Events @@ -21,12 +22,13 @@ name | params | description -- | -- | -- change | `(value: TabValue, label: string)` | \- click | `(value: TabValue, label: string)` | \- -scroll | `({ scrollTop: number, isFixed: boolean })` | \- +scroll | `(scrollTop: number, isFixed: boolean)` | \- ### TabPanel Props name | type | default | description | required -- | -- | -- | -- | -- +badge-props | Object | {} | \- | N destroy-on-hide | Boolean | true | \- | N disabled | Boolean | false | \- | N label | String | - | \- | N diff --git a/src/tabs/README.md b/src/tabs/README.md index 1e97cfda7..2faf95f55 100644 --- a/src/tabs/README.md +++ b/src/tabs/README.md @@ -27,6 +27,8 @@ CSS 变量名|说明 --td-tab-item-disabled-color | 选项卡禁止状态时字体颜色 --td-tab-track-color | 选项卡滑块颜色 --td-tab-track-thickness | 选项卡滑块厚度（水平时为高度，垂直时为宽度） +--td-tab-track-width | 选项卡滑块宽度 +--td-tab-track-radius | 选项卡滑块圆角 --td-tab-border-color | 选项卡底部边框颜色 ## 代码演示 @@ -119,21 +121,23 @@ show-bottom-line | Boolean | true | 是否展示底部激活线条 | N sticky | Boolean | false | 是否开启粘性布局 | N sticky-props | Object | - | 透传至 Sticky 组件。TS 类型：`StickyProps`，[Sticky API Documents](./sticky?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N swipeable | Boolean | true | 是否可以滑动切换 | N -value | String / Number | - | 激活的选项卡值。TS 类型：`TabValue` `type TabValue = string | number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N -default-value | String / Number | undefined | 激活的选项卡值。非受控属性。TS 类型：`TabValue` `type TabValue = string | number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N +theme | String | 'line' | 标签的样式。可选项：line/tag/card | N +value | String / Number | - | 激活的选项卡值。TS 类型：`TabValue` `type TabValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N +default-value | String / Number | undefined | 激活的选项卡值。非受控属性。TS 类型：`TabValue` `type TabValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N ### Tabs Events 名称 | 参数 | 描述 -- | -- | -- change | `(value: TabValue, label: string)` | 激活的选项卡发生变化时触发 -click | `(value: TabValue, label: string)` | 点击 tab 选项卡时触发 -scroll | `({ scrollTop: number, isFixed: boolean })` | 页面滚动时触发，scrollTop: 距离顶部位置，isFixed: 是否吸顶 +click | `(value: TabValue, label: string)` | 点击选项卡时触发 +scroll | `(scrollTop: number, isFixed: boolean)` | 页面滚动时触发 ### TabPanel Props 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- +badge-props | Object | null | 透传至 Badge 组件 | N destroy-on-hide | Boolean | true | 选项卡内容隐藏时是否销毁 | N disabled | Boolean | false | 是否禁用当前选项卡 | N label | String | - | 选项卡名称 | N diff --git a/src/tabs/__test__/__snapshots__/demo.test.js.snap b/src/tabs/__test__/__snapshots__/demo.test.js.snap index 07af7cef9..8ce859ee1 100644 --- a/src/tabs/__test__/__snapshots__/demo.test.js.snap +++ b/src/tabs/__test__/__snapshots__/demo.test.js.snap @@ -1,42 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Tabs Tabs adjust-time demo works fine 1`] = ` - - - - 标签一内容 - - - 标签二内容 - - - 标签三内容 - - - 标签四内容 - - - -`; - exports[`Tabs Tabs base demo works fine 1`] = ` - 标签一内容 - + /> - 标签二内容 - + /> - 标签一内容 - + /> - 标签二内容 - + /> - 标签三内容 - + /> - 标签一内容 - + /> - 标签二内容 - + /> - 标签三内容 - + /> - 标签四内容 - + /> `; @@ -128,46 +73,41 @@ exports[`Tabs Tabs scroll demo works fine 1`] = ` - 标签一内容 - + label="选项" + value="{{0}}" + /> - 标签二内容 - + label="选项" + value="{{1}}" + /> - 标签三内容 - + label="选项" + value="{{2}}" + /> - 标签四内容 - + label="选项" + value="{{3}}" + /> - 标签五内容 - + label="选项" + value="{{4}}" + /> - 标签六内容 - + label="选项" + value="{{5}}" + /> + + `; @@ -176,66 +116,47 @@ exports[`Tabs Tabs size demo works fine 1`] = ` - 标签一内容 - + /> - 标签二内容 - + /> - 标签三内容 - + /> - 标签四内容 - + /> + - 标签一内容 - + /> - 标签二内容 - + /> - 标签三内容 - + /> - 标签四内容 - + /> `; @@ -244,68 +165,74 @@ exports[`Tabs Tabs status demo works fine 1`] = ` - 标签一内容 - + /> - 标签二内容 - + /> - 禁用状态 - + /> `; -exports[`Tabs Tabs unline demo works fine 1`] = ` - +exports[`Tabs Tabs theme demo works fine 1`] = ` + - 标签一内容 - + /> - 标签二内容 - + /> - 标签三内容 - + /> - 标签四内容 - + /> - + + + + + + + + `; exports[`Tabs Tabs vertical demo works fine 1`] = ` @@ -370,3 +297,71 @@ exports[`Tabs Tabs vertical demo works fine 1`] = ` `; + +exports[`Tabs Tabs with-badge demo works fine 1`] = ` + + + + + + + +`; + +exports[`Tabs Tabs with-content demo works fine 1`] = ` + + + + 标签一内容 + + + 标签二内容 + + + 标签三内容 + + + 标签四内容 + + + +`; diff --git a/src/tabs/__test__/__snapshots__/index.test.js.snap b/src/tabs/__test__/__snapshots__/index.test.js.snap index a7afc7dff..fda6693f5 100644 --- a/src/tabs/__test__/__snapshots__/index.test.js.snap +++ b/src/tabs/__test__/__snapshots__/index.test.js.snap @@ -20,7 +20,7 @@ exports[`tabs :base 1`] = ` style="z-index:2;position:fixed;top:0px" > - - 标签页一 - + + 标签页一 + - - label1 - + + label1 + - - label2 - + + label2 + - - label3 - + + label3 + diff --git a/src/tabs/__test__/demo.test.js b/src/tabs/__test__/demo.test.js index 6b5e564fc..bdb431199 100644 --- a/src/tabs/__test__/demo.test.js +++ b/src/tabs/__test__/demo.test.js @@ -5,7 +5,7 @@ import simulate from 'miniprogram-simulate'; import path from 'path'; -const mapper = ['adjust-time', 'base', 'scroll', 'size', 'status', 'unline', 'vertical']; +const mapper = ['base', 'scroll', 'size', 'status', 'theme', 'vertical', 'with-badge', 'with-content']; describe('Tabs', () => { mapper.forEach((demoName) => { diff --git a/src/tabs/_example/base/index.wxml b/src/tabs/_example/base/index.wxml index 51cf68f7f..9c3d39f75 100644 --- a/src/tabs/_example/base/index.wxml +++ b/src/tabs/_example/base/index.wxml @@ -1,12 +1,12 @@ - 标签一内容 - 标签二内容 + + - 标签一内容 - 标签二内容 - 标签三内容 + + + - 标签一内容 - 标签二内容 - 标签三内容 - 标签四内容 + + + + diff --git a/src/tabs/_example/base/index.wxss b/src/tabs/_example/base/index.wxss index 77126f4a9..3980d90af 100644 --- a/src/tabs/_example/base/index.wxss +++ b/src/tabs/_example/base/index.wxss @@ -5,7 +5,7 @@ .custom-tabs t-tab-panel { text-align: center; justify-content: center; - height: 172rpx; + max-height: 172rpx; line-height: 172rpx; color: rgba(0, 0, 0, 0.26); } diff --git a/src/tabs/_example/scroll/index.wxml b/src/tabs/_example/scroll/index.wxml index dc1f851ce..4b422fc6e 100644 --- a/src/tabs/_example/scroll/index.wxml +++ b/src/tabs/_example/scroll/index.wxml @@ -1,8 +1,3 @@ - - 标签一内容 - 标签二内容 - 标签三内容 - 标签四内容 - 标签五内容 - 标签六内容 + + diff --git a/src/tabs/_example/scroll/index.wxss b/src/tabs/_example/scroll/index.wxss index 1f9132a24..e69de29bb 100644 --- a/src/tabs/_example/scroll/index.wxss +++ b/src/tabs/_example/scroll/index.wxss @@ -1,7 +0,0 @@ -.custom-tabs t-tab-panel { - text-align: center; - justify-content: center; - height: 172rpx; - line-height: 172rpx; - color: rgba(0, 0, 0, 0.26); -} diff --git a/src/tabs/_example/size/index.wxml b/src/tabs/_example/size/index.wxml index e592a9847..8b5cfb04d 100644 --- a/src/tabs/_example/size/index.wxml +++ b/src/tabs/_example/size/index.wxml @@ -1,19 +1,15 @@ - - 标签一内容 - 标签二内容 - 标签三内容 - 标签四内容 + + + + + - - 标签一内容 - 标签二内容 - 标签三内容 - 标签四内容 + + + + + + + diff --git a/src/tabs/_example/status/index.wxml b/src/tabs/_example/status/index.wxml index 6a2a820d7..cd2f43e4b 100644 --- a/src/tabs/_example/status/index.wxml +++ b/src/tabs/_example/status/index.wxml @@ -1,5 +1,5 @@ - - 标签一内容 - 标签二内容 - 禁用状态 + + + + diff --git a/src/tabs/_example/status/index.wxss b/src/tabs/_example/status/index.wxss index 1f9132a24..e69de29bb 100644 --- a/src/tabs/_example/status/index.wxss +++ b/src/tabs/_example/status/index.wxss @@ -1,7 +0,0 @@ -.custom-tabs t-tab-panel { - text-align: center; - justify-content: center; - height: 172rpx; - line-height: 172rpx; - color: rgba(0, 0, 0, 0.26); -} diff --git a/src/tabs/_example/tabs.json b/src/tabs/_example/tabs.json index 2fff7d242..b05d617f9 100644 --- a/src/tabs/_example/tabs.json +++ b/src/tabs/_example/tabs.json @@ -6,8 +6,8 @@ "scroll": "./scroll", "size": "./size", "status": "./status", - "unline": "./unline", - "vertical": "./vertical", - "adjust-time": "./adjust-time" + "with-badge": "./with-badge", + "theme": "./theme", + "with-content": "./with-content" } } diff --git a/src/tabs/_example/tabs.wxml b/src/tabs/_example/tabs.wxml index e301ad9a3..5e8b60cab 100644 --- a/src/tabs/_example/tabs.wxml +++ b/src/tabs/_example/tabs.wxml @@ -1,26 +1,25 @@ Tabs 选项卡 用于内容分类后的展示切换。 - + - - - + + - - + + - + - - - - + + + + diff --git a/src/tabs/_example/theme/index.js b/src/tabs/_example/theme/index.js new file mode 100644 index 000000000..b79c5124b --- /dev/null +++ b/src/tabs/_example/theme/index.js @@ -0,0 +1 @@ +Component({}); diff --git a/src/tabs/_example/theme/index.json b/src/tabs/_example/theme/index.json new file mode 100644 index 000000000..467ce2945 --- /dev/null +++ b/src/tabs/_example/theme/index.json @@ -0,0 +1,3 @@ +{ + "component": true +} diff --git a/src/tabs/_example/theme/index.wxml b/src/tabs/_example/theme/index.wxml new file mode 100644 index 000000000..94277d0c4 --- /dev/null +++ b/src/tabs/_example/theme/index.wxml @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/tabs/_example/theme/index.wxss b/src/tabs/_example/theme/index.wxss new file mode 100644 index 000000000..e69de29bb diff --git a/src/tabs/_example/unline/index.wxml b/src/tabs/_example/unline/index.wxml deleted file mode 100644 index 44d3e3cd8..000000000 --- a/src/tabs/_example/unline/index.wxml +++ /dev/null @@ -1,12 +0,0 @@ - - 标签一内容 - 标签二内容 - 标签三内容 - 标签四内容 - diff --git a/src/tabs/_example/unline/index.wxss b/src/tabs/_example/unline/index.wxss deleted file mode 100644 index 1f9132a24..000000000 --- a/src/tabs/_example/unline/index.wxss +++ /dev/null @@ -1,7 +0,0 @@ -.custom-tabs t-tab-panel { - text-align: center; - justify-content: center; - height: 172rpx; - line-height: 172rpx; - color: rgba(0, 0, 0, 0.26); -} diff --git a/src/tabs/_example/adjust-time/index.js b/src/tabs/_example/with-badge/index.js similarity index 100% rename from src/tabs/_example/adjust-time/index.js rename to src/tabs/_example/with-badge/index.js diff --git a/src/tabs/_example/adjust-time/index.json b/src/tabs/_example/with-badge/index.json similarity index 100% rename from src/tabs/_example/adjust-time/index.json rename to src/tabs/_example/with-badge/index.json diff --git a/src/tabs/_example/with-badge/index.wxml b/src/tabs/_example/with-badge/index.wxml new file mode 100644 index 000000000..d6e2e7662 --- /dev/null +++ b/src/tabs/_example/with-badge/index.wxml @@ -0,0 +1,5 @@ + + + + + diff --git a/src/tabs/_example/with-badge/index.wxss b/src/tabs/_example/with-badge/index.wxss new file mode 100644 index 000000000..e69de29bb diff --git a/src/tabs/_example/unline/index.js b/src/tabs/_example/with-content/index.js similarity index 100% rename from src/tabs/_example/unline/index.js rename to src/tabs/_example/with-content/index.js diff --git a/src/tabs/_example/unline/index.json b/src/tabs/_example/with-content/index.json similarity index 100% rename from src/tabs/_example/unline/index.json rename to src/tabs/_example/with-content/index.json diff --git a/src/tabs/_example/adjust-time/index.wxml b/src/tabs/_example/with-content/index.wxml similarity index 100% rename from src/tabs/_example/adjust-time/index.wxml rename to src/tabs/_example/with-content/index.wxml diff --git a/src/tabs/_example/adjust-time/index.wxss b/src/tabs/_example/with-content/index.wxss similarity index 100% rename from src/tabs/_example/adjust-time/index.wxss rename to src/tabs/_example/with-content/index.wxss diff --git a/src/tabs/props.ts b/src/tabs/props.ts index 731584fc4..fad98d3f9 100644 --- a/src/tabs/props.ts +++ b/src/tabs/props.ts @@ -38,6 +38,11 @@ const props: TdTabsProps = { type: Boolean, value: true, }, + /** 标签的样式 */ + theme: { + type: String, + value: 'line', + }, /** 激活的选项卡值 */ value: { type: null, diff --git a/src/tabs/tab-panel-props.ts b/src/tabs/tab-panel-props.ts index b95b97160..9de5b07df 100644 --- a/src/tabs/tab-panel-props.ts +++ b/src/tabs/tab-panel-props.ts @@ -6,6 +6,11 @@ import { TdTabPanelProps } from './type'; const props: TdTabPanelProps = { + /** 透传至 Badge 组件 */ + badgeProps: { + type: Object, + value: null, + }, /** 选项卡内容隐藏时是否销毁 */ destroyOnHide: { type: Boolean, diff --git a/src/tabs/tabs.json b/src/tabs/tabs.json index 901f286cb..22785caf6 100644 --- a/src/tabs/tabs.json +++ b/src/tabs/tabs.json @@ -1,6 +1,7 @@ { "component": true, "usingComponents": { - "t-sticky": "../sticky/sticky" + "t-sticky": "../sticky/sticky", + "t-badge": "../badge/badge" } } diff --git a/src/tabs/tabs.less b/src/tabs/tabs.less index fa845ce5b..4396ef9e2 100644 --- a/src/tabs/tabs.less +++ b/src/tabs/tabs.less @@ -2,7 +2,7 @@ @tab-nav-background-color: #fff; -@tab-item-height--horizontal: 92rpx; +@tab-item-height--horizontal: 96rpx; @tab-item-height--vertical: 108rpx; @tab-item-width--vertical: 208rpx; @@ -13,7 +13,13 @@ // track @tab-track-color: @primary-color; -@tab-track-thickness: 4rpx; +@tab-track-thickness: 6rpx; +@tab-track-width: 32rpx; +@tab-track-radius: 8rpx; + +// theme = tag +@tab-item-height--tag: 64rpx; +@tab-item-background--tag: @primary-color-1; page { --td-tab-nav-bg-color: @tab-nav-background-color; @@ -21,23 +27,29 @@ page { --td-tab-item-active-color: @tab-item-active-color; --td-tab-item-disabled-color: @tab-item-disabled-color; --td-tab-track-color: @tab-track-color; + --td-tab-track-width: @tab-track-width; --td-tab-track-thickness: @tab-track-thickness; + --td-tab-track-radius: @tab-track-radius; --td-tab-border-color: @tab-border-color; } .@{prefix}-tabs { position: relative; + font-size: 28rpx; + background: var(--td-tab-nav-bg-color, @tab-nav-background-color); &__wrapper { display: flex; overflow: hidden; - } + background: var(--td-tab-nav-bg-color, @tab-nav-background-color); - font-size: 28rpx; - background-color: #fff; + &--card { + background: @gray-color-1; + } + } .@{prefix}-is-active { - font-weight: 700; + font-weight: 600; color: var(--td-tab-item-active-color, @tab-item-active-color); } @@ -46,21 +58,24 @@ page { } &__item { + position: relative; + display: flex; + align-items: center; + justify-content: center; flex: 1; font-weight: 400; color: var(--td-tab-item-color, @tab-item-color); + padding: 16rpx; + box-sizing: border-box; &--top, &--bottom { height: @tab-item-height--horizontal; - line-height: @tab-item-height--horizontal; - text-align: center; - min-width: 162rpx; + min-width: 112rpx; } &--left, &--right { - text-align: center; height: @tab-item-height--vertical; line-height: @tab-item-height--vertical; width: @tab-item-width--vertical; @@ -70,6 +85,41 @@ page { background-color: #fff; } } + + &-inner { + &--tag { + width: 100%; + text-align: center; + line-height: @tab-item-height--tag; + border-radius: (@tab-item-height--tag / 2); + background-color: @tab-item-background--tag; + } + } + + &--card { + &.@{prefix}-is-active { + background-color: @bg-color-block; + border-radius: 0 18rpx 0 0; + } + } + + &-tail { + position: absolute; + bottom: 0; + right: -36rpx; + width: 36rpx; + height: 36rpx; + background: #fff; + + &::after { + content: ''; + display: block; + width: 100%; + height: 100%; + background-color: @gray-color-1; + border-radius: 0 0 0 18rpx; + } + } } &__content { @@ -108,6 +158,15 @@ page { top: 0; width: var(--td-tab-track-thickness, @tab-track-thickness); } + + &--top, + &--bottom { + left: 0; + bottom: 0; + width: var(--td-tab-track-width, @tab-track-width); + height: var(--td-tab-track-thickness, @tab-track-thickness); + border-radius: var(--td-tab-track-radius, @tab-track-radius); + } } &__scroll { @@ -115,15 +174,26 @@ page { &--bottom { height: @tab-item-height--horizontal; position: relative; - background-color: var(--td-tab-nav-bg-color, @tab-nav-background-color); &::after { content: ''; } } + &--top { - border-bottom: solid 1rpx var(--td-tab-border-color, @tab-border-color); + &:after { + content: ''; + display: block; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 1px; + background-color: var(--td-tab-border-color, @tab-border-color); + transform: scaleY(0.5); + } } + &--left, &--right { width: @tab-item-width--vertical; @@ -147,12 +217,6 @@ page { transition-property: transform; } - .@{prefix}-tabs__track { - left: 0; - bottom: 0; - height: var(--td-tab-track-thickness, @tab-track-thickness); - } - .@{prefix}-tabs__content { width: 100%; } diff --git a/src/tabs/tabs.ts b/src/tabs/tabs.ts index 001661f8b..f91f004fc 100644 --- a/src/tabs/tabs.ts +++ b/src/tabs/tabs.ts @@ -13,7 +13,6 @@ enum Position { bottom = 'bottom', left = 'left', } -const trackLineWidth = 30; @wxComponent() export default class Tabs extends SuperComponent { behaviors = [dom, touch]; @@ -83,8 +82,8 @@ export default class Tabs extends SuperComponent { }); this.adjustPlacement(); - this.gettingBoundingClientRect(`.${name}`, true).then((res: any) => { - this.containerWidth = res[0].width; + this.gettingBoundingClientRect(`.${name}`).then((res: any) => { + this.containerWidth = res.width; }); } @@ -109,12 +108,9 @@ export default class Tabs extends SuperComponent { updateTabs(cb) { const { children } = this; - this.setData( - { - tabs: children.map((child: any) => child.data), - }, - cb, - ); + const tabs = children.map((child: any) => child.data); + + this.setData({ tabs }, cb); this.setCurrentIndexByName(this.properties.value); } @@ -160,53 +156,71 @@ export default class Tabs extends SuperComponent { return currentIndex * targetWidth - (1 / 2) * containerWidth + targetWidth / 2; } - setTrack() { + getTrackSize() { + return new Promise((resolve) => { + if (this.trackWidth) { + resolve(this.trackWidth); + return; + } + this.gettingBoundingClientRect(`.${prefix}-tabs__track`).then((res) => { + if (res) { + this.trackWidth = res.width; + resolve(this.trackWidth); + } + }); + }); + } + + async setTrack() { if (!this.properties.showBottomLine) return; const { children } = this; if (!children) return; const { currentIndex, isScrollX, direction } = this.data; if (currentIndex <= -1) return; - this.gettingBoundingClientRect(`.${prefix}-tabs__item`, true) - .then((res: any) => { - const rect = res[currentIndex]; - if (!rect) return; - let count = 0; - let distance = 0; - // eslint-disable-next-line no-restricted-syntax - for (const item of res) { - if (count < currentIndex) { - distance += isScrollX ? item.width : item.height; - count += 1; - } - } - if (this.containerWidth) { - const offset = this.calcScrollOffset( - this.containerWidth, - rect.left, - rect.width, - this.data.offset, - currentIndex, - ); - this.setData({ - offset, - }); + try { + const res = await this.gettingBoundingClientRect(`.${prefix}-tabs__item`, true); + const rect = res[currentIndex]; + if (!rect) return; + let count = 0; + let distance = 0; + // eslint-disable-next-line no-restricted-syntax + for (const item of res) { + if (count < currentIndex) { + distance += isScrollX ? item.width : item.height; + count += 1; } + } - if (isScrollX) { - distance += (rect.width - trackLineWidth) / 2; - } - let trackStyle = `-webkit-transform: translate${direction}(${distance}px); - transform: translate${direction}(${distance}px); - `; - trackStyle += isScrollX ? `width: ${trackLineWidth}px;` : `height: ${rect.height}px;`; + if (this.containerWidth) { + const offset = this.calcScrollOffset( + this.containerWidth, + rect.left, + rect.width, + this.data.offset, + currentIndex, + ); this.setData({ - trackStyle, + offset, }); - }) - .catch((err) => { - this.triggerEvent('error', err); + } + + if (isScrollX) { + const trackLineWidth = await this.getTrackSize(); + distance += (rect.width - trackLineWidth) / 2; + } + let trackStyle = `-webkit-transform: translate${direction}(${distance}px); + transform: translate${direction}(${distance}px); + `; + if (!isScrollX) { + trackStyle += `height: ${rect.height}px;`; + } + this.setData({ + trackStyle, }); + } catch (err) { + this.triggerEvent('error', err); + } } onTabTap(event: any) { diff --git a/src/tabs/tabs.wxml b/src/tabs/tabs.wxml index 34e6a5460..87eb2e93f 100644 --- a/src/tabs/tabs.wxml +++ b/src/tabs/tabs.wxml @@ -1,3 +1,4 @@ + @@ -9,7 +10,7 @@ container="{{ stickyProps.container }}" bind:scroll="onTouchScroll" > - + - {{item.label}} + + +