feat: ✨ Tabs 组件添加 show-scrollbar 属性用于控制展示滚动条 (#1363)

✅ Closes: #643

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

docs/en-US/component/tabs.md

@@ -200,3 +200,58 @@ When `slidable` is set to `always`, all tabs will be aligned to the left and can
   </block>
 </wd-tabs>
 ```
+
+## 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  | -       |

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;

src/uni_modules/wot-design-uni/components/wd-tabs/types.ts

@@ -80,7 +80,11 @@ export const tabsProps = {
    * 可选值：'auto' | 'always'
    * @default auto
    */
-  slidable: makeStringProp<TabsSlidable>('auto')
+  slidable: makeStringProp<TabsSlidable>('auto'),
+  /**
+   * 标签可滑动时是否显示滚动条
+   */
+  showScrollbar: makeBooleanProp(false)
 }
 
 export type TabsExpose = {

src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue

@@ -2,7 +2,9 @@
   <template v-if="sticky">
     <wd-sticky-box>
       <view
-        :class="`wd-tabs ${customClass} ${innerSlidable ? 'is-slide' : ''} ${mapNum < children.length && mapNum !== 0 ? 'is-map' : ''}`"
+        :class="`wd-tabs ${customClass} ${innerSlidable ? 'is-slide' : ''} ${mapNum < children.length && mapNum !== 0 ? 'is-map' : ''} ${
+          !showScrollbar ? 'is-hide-scrollbar' : ''
+        }`"
         :style="customStyle"
       >
         <wd-sticky :offset-top="offsetTop">
@@ -75,7 +77,11 @@
   </template>
 
   <template v-else>
-    <view :class="`wd-tabs ${customClass} ${innerSlidable ? 'is-slide' : ''} ${mapNum < children.length && mapNum !== 0 ? 'is-map' : ''}`">
+    <view
+      :class="`wd-tabs ${customClass} ${innerSlidable ? 'is-slide' : ''} ${mapNum < children.length && mapNum !== 0 ? 'is-map' : ''} ${
+        !showScrollbar ? 'is-hide-scrollbar' : ''
+      }`"
+    >
       <view class="wd-tabs__nav">
         <view class="wd-tabs__nav--wrap">
           <scroll-view :scroll-x="innerSlidable" scroll-with-animation :scroll-left="state.scrollLeft">