feat: tabs 新增 bottomLineMode；TabPanel 新增 lazy 属性 (#3428)

tabs 新增 bottomLineMode；TabPanel 新增 lazy 属性

Author: SkylerXie

src/tab-panel/props.ts

@@ -24,6 +24,11 @@ const props: TdTabPanelProps = {
     type: String,
     value: '',
   },
+  /** 是否启用选项卡懒加载 */
+  lazy: {
+    type: Boolean,
+    value: false,
+  },
   /** 用于自定义选项卡面板内容 */
   panel: {
     type: String,

src/tab-panel/tab-panel.ts

@@ -27,14 +27,15 @@ export default class TabPanel extends SuperComponent {
     active: false,
     hide: true,
     id: '',
+    hasActivated: false,
   };
 
   setId(id) {
     this.setData({ id });
   }
 
   observers = {
-    'label, badgeProps, disabled, icon, panel, value'() {
+    'label, badgeProps, disabled, icon, panel, value, lazy'() {
       this.update();
     },
   };
@@ -53,6 +54,10 @@ export default class TabPanel extends SuperComponent {
   render(active: Boolean, parent: WechatMiniprogram.Component.TrivialInstance) {
     this.initialized = this.initialized || active;
 
+    if (active && !this.data.hasActivated) {
+      this.setData({ hasActivated: true });
+    }
+
     this.setData({
       active,
       hide: !parent.data.animation && !active,

src/tab-panel/tab-panel.wxml

@@ -1,6 +1,7 @@
 <wxs src="../common/utils.wxs" module="_" />
 
 <view
+  wx:if="{{!lazy || hasActivated}}"
   class="class {{prefix}}-class {{classPrefix}} {{active ? classPrefix + '--active': classPrefix + '--inactive'}}"
   style="{{_._style([style, customStyle, (hide ? 'display: none' : '')])}}"
   id="{{id}}"

src/tab-panel/type.ts

@@ -37,6 +37,14 @@ export interface TdTabPanelProps {
     type: StringConstructor;
     value?: string;
   };
+  /**
+   * 是否启用选项卡懒加载
+   * @default false
+   */
+  lazy?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
   /**
    * 用于自定义选项卡面板内容
    */

src/tabs/README.en-US.md

@@ -9,6 +9,7 @@ name | type | default | description | required
 style | Object | - | CSS(Cascading Style Sheets) | N
 custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
 animation | Object | - | Typescript：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
+bottom-line-mode | String | fixed | options: fixed/auto/full | N
 middle | Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 show-bottom-line | Boolean | true | \- | N
 space-evenly | Boolean | true | \- | N
@@ -27,6 +28,7 @@ name | params | description
 change | `(value: TabValue, label: string)` | \-
 click | `(value: TabValue, label: string)` | \-
 scroll | `(scrollTop: number, isFixed: boolean)` | \-
+
 ### Tabs External Classes
 
 className | Description
@@ -48,6 +50,7 @@ badge-props | Object | - | \- | N
 disabled | Boolean | false | \- | N
 icon | String / Object | - | \- | N
 label | String | - | \- | N
+lazy | Boolean | false | Enable tab lazy loading | N
 panel | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 value | String / Number | - | Typescript：`TabValue`，[Tabs API Documents](./tabs?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-panel/type.ts) | N
 
@@ -72,4 +75,4 @@ Name | Default Value | Description
 --td-tab-track-color | @brand-color | - 
 --td-tab-track-radius | 8rpx | - 
 --td-tab-track-thickness | 6rpx | - 
---td-tab-track-width | 32rpx | -
+--td-tab-track-width | 32rpx | -

src/tabs/README.md

@@ -122,6 +122,7 @@ Page({
 style | Object | - | 样式 | N
 custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
 animation | Object | - | 动画效果设置。其中 duration 表示动画时长。（单位：秒）。TS 类型：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
+bottom-line-mode | String | fixed | 激活下划线的模式。可选项：fixed/auto/full | N
 middle | Slot | - | 中间内容，介于头部和内容之间。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 show-bottom-line | Boolean | true | 是否展示底部激活线条 | N
 space-evenly | Boolean | true | 选项卡头部空间是否均分 | N
@@ -140,6 +141,7 @@ default-value | String / Number | undefined | 激活的选项卡值。非受控
 change | `(value: TabValue, label: string)` | 激活的选项卡发生变化时触发
 click | `(value: TabValue, label: string)` | 点击选项卡时触发
 scroll | `(scrollTop: number, isFixed: boolean)` | 页面滚动时触发
+
 ### Tabs External Classes
 
 类名 | 描述
@@ -161,6 +163,7 @@ badge-props | Object | - | 透传至 Badge 组件 | N
 disabled | Boolean | false | 是否禁用当前选项卡 | N
 icon | String / Object | - | `1.0.0-rc.1`。图标，传对象则透传至 Icon | N
 label | String | - | 选项卡名称 | N
+lazy | Boolean | false | 是否启用选项卡懒加载 | N
 panel | String / Slot | - | 用于自定义选项卡面板内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabValue`，[Tabs API Documents](./tabs?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-panel/type.ts) | N
 
@@ -185,4 +188,4 @@ value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabV
 --td-tab-track-color | @brand-color | - 
 --td-tab-track-radius | 8rpx | - 
 --td-tab-track-thickness | 6rpx | - 
---td-tab-track-width | 32rpx | -
+--td-tab-track-width | 32rpx | -

src/tabs/props.ts

@@ -10,6 +10,11 @@ const props: TdTabsProps = {
   animation: {
     type: Object,
   },
+  /** 激活下划线的模式 */
+  bottomLineMode: {
+    type: String,
+    value: 'fixed',
+  },
   /** 组件类名，分别用于设置 组件外层元素、选项卡单项、选项卡激活态、滚动条样式类名 等类名 */
   externalClasses: {
     type: Array,

src/tabs/tabs.ts

@@ -171,16 +171,21 @@ export default class Tabs extends SuperComponent {
     },
 
     getTrackSize() {
+      const { bottomLineMode } = this.properties;
+      const targetMap = {
+        fixed: `.${prefix}-tabs__track`,
+        auto: `.${prefix}-tabs__item--active .${prefix}-tabs__item-inner`,
+        full: `.${prefix}-tabs__item--active`,
+      };
       return new Promise<number>((resolve, reject) => {
         if (this.trackWidth) {
           resolve(this.trackWidth);
           return;
         }
-        getRect(this, `.${prefix}-tabs__track`)
+        getRect(this, targetMap[bottomLineMode] || targetMap.fixed)
           .then((res) => {
             if (res) {
-              this.trackWidth = res.width;
-              resolve(this.trackWidth);
+              resolve(res.width);
             }
           })
           .catch(reject);
@@ -221,13 +226,14 @@ export default class Tabs extends SuperComponent {
           getObserver(this, `.${name}`).then(() => this.setTrack());
         }
 
+        const trackLineWidth = await this.getTrackSize();
         if (this.data.theme === 'line') {
-          const trackLineWidth = await this.getTrackSize();
           distance += (rect.width - trackLineWidth) / 2;
         }
         this.setData({
           trackStyle: `-webkit-transform: translateX(${distance}px);
             transform: translateX(${distance}px);
+            width:${trackLineWidth}px;
           `,
         });
       } catch (err) {

src/tabs/type.ts

@@ -14,6 +14,14 @@ export interface TdTabsProps {
     type: ObjectConstructor;
     value?: TabAnimation;
   };
+  /**
+   * 激活下划线的模式
+   * @default fixed
+   */
+  bottomLineMode?: {
+    type: StringConstructor;
+    value?: 'fixed' | 'auto' | 'full';
+  };
   /**
    * 组件类名，分别用于设置 组件外层元素、选项卡单项、选项卡激活态、滚动条样式类名 等类名
    */