From e185a8b291fde856f4c3704132664eac34b0d588 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=8D=E5=A6=82=E6=91=B8=E9=B1=BC=E5=8E=BB?= <1780903673@qq.com> Date: Sun, 9 Nov 2025 11:02:53 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20Tabs=20=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20show-scrollbar=20=E5=B1=9E=E6=80=A7?= =?UTF-8?q?=E7=94=A8=E4=BA=8E=E6=8E=A7=E5=88=B6=E5=B1=95=E7=A4=BA=E6=BB=9A?= =?UTF-8?q?=E5=8A=A8=E6=9D=A1=20(#1363)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✅ Closes: #643 --- docs/component/tabs.md | 1 + docs/en-US/component/tabs.md | 57 ++++++++++++++++++- .../components/wd-tabs/index.scss | 10 +++- .../components/wd-tabs/types.ts | 6 +- .../components/wd-tabs/wd-tabs.vue | 10 +++- 5 files changed, 79 insertions(+), 5 deletions(-) diff --git a/docs/component/tabs.md b/docs/component/tabs.md index 34c894b1..7a9a458d 100644 --- a/docs/component/tabs.md +++ b/docs/component/tabs.md @@ -270,6 +270,7 @@ function handlePopupShow() { | animated | 是否开启切换标签内容时的转场动画 | boolean | - | false | - | | duration | 切换动画过渡时间，单位毫秒 | number | - | 300 | - | | slidable | 是否开启滚动导航 | TabsSlidable | `always` | `auto` | 1.4.0 | +| showScrollbar | 标签可滑动时是否显示滚动条 | boolean | - | false | $LOWEST_VERSION$ | | badge-props | 自定义徽标的属性，传入的对象会被透传给 [Badge 组件的 props](/component/badge#attributes) | BadgeProps | - | - | 1.4.0 | ## Tab Attributes diff --git a/docs/en-US/component/tabs.md b/docs/en-US/component/tabs.md index 7e796ffa..8a0cd05a 100644 --- a/docs/en-US/component/tabs.md +++ b/docs/en-US/component/tabs.md @@ -199,4 +199,59 @@ When `slidable` is set to `always`, all tabs will be aligned to the left and can -``` \ No newline at end of file +``` + +## Tabs Attributes + +| Parameter | Description | Type | Options | Default | Version | +| -------------- | ---------------------------------------------------------------------------------- | --------------- | ------------ | ------- | ------- | +| v-model | Binding value | string / number | - | - | - | +| slidable-num | Threshold count of tabs to enable scrolling when `slidable` is `auto` | number | - | `6` | - | +| map-num | Threshold count of tabs to show navigation map | number | - | `10` | - | +| map-title | Title of the navigation map | string | - | - | 1.4.0 | +| sticky | Enable sticky layout | boolean | - | `false` | - | +| offset-top | Distance from the top when sticky | number | - | `0` | - | +| swipeable | Enable gesture swipe | boolean | - | `false` | - | +| autoLineWidth | Bottom line width follows text; invalid when `lineWidth` is specified | boolean | - | `false` | 1.4.0 | +| lineWidth | Bottom line width, unit px | number | - | `19` | - | +| lineHeight | Bottom line height, unit px | number | - | `3` | - | +| color | Text color | string | - | - | - | +| inactiveColor | Text color of inactive tabs | string | - | - | - | +| animated | Enable transition animation when switching tab content | boolean | - | `false` | - | +| duration | Transition duration in ms | number | - | `300` | - | +| slidable | Enable scrollable navigation | TabsSlidable | `always` | `auto` | 1.4.0 | +| showScrollbar | Whether to show scrollbar when tabs are slidable (nav) | boolean | - | `false` | $LOWEST_VERSION$ | +| badge-props | Props passed to [Badge component props](/component/badge#attributes) | BadgeProps | - | - | 1.4.0 | + +## Tab Attributes + +| Parameter | Description | Type | Options | Default | Version | +| --------- | --------------------------------------------------------------- | ------- | ------- | ------- | ------- | +| name | Tab name | string | - | - | - | +| title | Title | string | - | - | - | +| disabled | Disable | boolean | - | `false` | - | +| lazy | Lazy render; when `animated` is enabled this is always `false` | boolean | - | `true` | 1.4.0 | + +## Tabs Events + +| Event Name | Description | Parameters | Version | +| ---------- | ----------------------- | --------------------------------------------------------------- | ------- | +| change | Triggered when value changes | `event = { index, name }` | - | +| click | Triggered when title is clicked | `event = { index, name }` | - | +| disabled | Triggered when clicking a disabled title | `event = { index, name }` | - | + +## Methods + +Exposed methods + +| Method | Description | Signature | Version | +| ---------------- | --------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------- | +| setActive | Set active tab; params: `value` active value, `init` initialized, `setScroll` set scroll-view | `(value: number \| string, init: boolean, setScroll: boolean) => void` | - | +| scrollIntoView | Scroll the selected tab into view | `() => void` | - | +| updateLineStyle | Update active underline style; `animation` determines whether to animate, default enabled | `(animation?: boolean) => void` | - | + +## External Classes + +| Class Name | Description | Version | +| ------------ | ---------------- | ------- | +| custom-class | Root node style | - | \ No newline at end of file diff --git a/src/uni_modules/wot-design-uni/components/wd-tabs/index.scss b/src/uni_modules/wot-design-uni/components/wd-tabs/index.scss index 54e02954..40e3aa8d 100644 --- a/src/uni_modules/wot-design-uni/components/wd-tabs/index.scss +++ b/src/uni_modules/wot-design-uni/components/wd-tabs/index.scss @@ -66,6 +66,14 @@ background: #fff; width: 100%; + @include when(hide-scrollbar) { + ::-webkit-scrollbar { + width: 0; + height: 0; + -webkit-appearance: none; + } + } + @include e(nav) { left: 0; right: 0; @@ -115,7 +123,7 @@ @include lineEllipsis(); } - @include edeep(nav-item-badge){ + @include edeep(nav-item-badge) { display: flex; align-items: center; justify-content: center; diff --git a/src/uni_modules/wot-design-uni/components/wd-tabs/types.ts b/src/uni_modules/wot-design-uni/components/wd-tabs/types.ts index 7d4f1448..bb2e4906 100644 --- a/src/uni_modules/wot-design-uni/components/wd-tabs/types.ts +++ b/src/uni_modules/wot-design-uni/components/wd-tabs/types.ts @@ -80,7 +80,11 @@ export const tabsProps = { * 可选值：'auto' | 'always' * @default auto */ - slidable: makeStringProp('auto') + slidable: makeStringProp('auto'), + /** + * 标签可滑动时是否显示滚动条 + */ + showScrollbar: makeBooleanProp(false) } export type TabsExpose = { diff --git a/src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue b/src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue index 90646b6e..60fd63bd 100644 --- a/src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue +++ b/src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue @@ -2,7 +2,9 @@