Skip to content

Commit 1a646aa

Browse files
SkylerXieSkylerXie
committed
feat: supplemnt
1 parent 6ef0421 commit 1a646aa

File tree

9 files changed

+51
-11
lines changed

9 files changed

+51
-11
lines changed

‎src/tab-panel/props.ts

+5
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,11 @@ const props: TdTabPanelProps = {
2424
type: String,
2525
value: '',
2626
},
27+
/** 是否启用选项卡懒加载 */
28+
lazy: {
29+
type: Boolean,
30+
value: false,
31+
},
2732
/** 用于自定义选项卡面板内容 */
2833
panel: {
2934
type: String,

‎src/tab-panel/tab-panel.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,15 @@ export default class TabPanel extends SuperComponent {
2727
active: false,
2828
hide: true,
2929
id: '',
30+
hasActivated: false,
3031
};
3132

3233
setId(id) {
3334
this.setData({ id });
3435
}
3536

3637
observers = {
37-
'label, badgeProps, disabled, icon, panel, value'() {
38+
'label, badgeProps, disabled, icon, panel, value, lazy'() {
3839
this.update();
3940
},
4041
};
@@ -53,6 +54,10 @@ export default class TabPanel extends SuperComponent {
5354
render(active: Boolean, parent: WechatMiniprogram.Component.TrivialInstance) {
5455
this.initialized = this.initialized || active;
5556

57+
if (active && !this.data.hasActivated) {
58+
this.setData({ hasActivated: true });
59+
}
60+
5661
this.setData({
5762
active,
5863
hide: !parent.data.animation && !active,

‎src/tab-panel/tab-panel.wxml

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<wxs src="../common/utils.wxs" module="_" />
22

33
<view
4+
wx:if="{{!lazy || hasActivated}}"
45
class="class {{prefix}}-class {{classPrefix}} {{active ? classPrefix + '--active': classPrefix + '--inactive'}}"
56
style="{{_._style([style, customStyle, (hide ? 'display: none' : '')])}}"
67
id="{{id}}"

‎src/tab-panel/type.ts

+8
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,14 @@ export interface TdTabPanelProps {
3737
type: StringConstructor;
3838
value?: string;
3939
};
40+
/**
41+
* 是否启用选项卡懒加载
42+
* @default false
43+
*/
44+
lazy?: {
45+
type: BooleanConstructor;
46+
value?: boolean;
47+
};
4048
/**
4149
* 用于自定义选项卡面板内容
4250
*/

‎src/tabs/README.en-US.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ name | type | default | description | required
99
style | Object | - | CSS(Cascading Style Sheets) | N
1010
custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
1111
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
12+
bottom-line-mode | String | fixed | options: fixed/auto/full | N
1213
middle | Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
1314
show-bottom-line | Boolean | true | \- | N
1415
space-evenly | Boolean | true | \- | N
@@ -27,6 +28,7 @@ name | params | description
2728
change | `(value: TabValue, label: string)` | \-
2829
click | `(value: TabValue, label: string)` | \-
2930
scroll | `(scrollTop: number, isFixed: boolean)` | \-
31+
3032
### Tabs External Classes
3133

3234
className | Description
@@ -48,6 +50,7 @@ badge-props | Object | - | \- | N
4850
disabled | Boolean | false | \- | N
4951
icon | String / Object | - | \- | N
5052
label | String | - | \- | N
53+
lazy | Boolean | false | Enable tab lazy loading | N
5154
panel | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
5255
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
5356

@@ -72,4 +75,4 @@ Name | Default Value | Description
7275
--td-tab-track-color | @brand-color | -
7376
--td-tab-track-radius | 8rpx | -
7477
--td-tab-track-thickness | 6rpx | -
75-
--td-tab-track-width | 32rpx | -
78+
--td-tab-track-width | 32rpx | -

‎src/tabs/README.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ Page({
122122
style | Object | - | 样式 | N
123123
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
124124
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
125+
bottom-line-mode | String | fixed | 激活下划线的模式。可选项：fixed/auto/full | N
125126
middle | Slot | - | 中间内容，介于头部和内容之间。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
126127
show-bottom-line | Boolean | true | 是否展示底部激活线条 | N
127128
space-evenly | Boolean | true | 选项卡头部空间是否均分 | N
@@ -140,6 +141,7 @@ default-value | String / Number | undefined | 激活的选项卡值。非受控
140141
change | `(value: TabValue, label: string)` | 激活的选项卡发生变化时触发
141142
click | `(value: TabValue, label: string)` | 点击选项卡时触发
142143
scroll | `(scrollTop: number, isFixed: boolean)` | 页面滚动时触发
144+
143145
### Tabs External Classes
144146

145147
类名 | 描述
@@ -161,6 +163,7 @@ badge-props | Object | - | 透传至 Badge 组件 | N
161163
disabled | Boolean | false | 是否禁用当前选项卡 | N
162164
icon | String / Object | - | `1.0.0-rc.1`。图标，传对象则透传至 Icon | N
163165
label | String | - | 选项卡名称 | N
166+
lazy | Boolean | false | 是否启用选项卡懒加载 | N
164167
panel | String / Slot | - | 用于自定义选项卡面板内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
165168
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
166169

@@ -185,4 +188,4 @@ value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabV
185188
--td-tab-track-color | @brand-color | -
186189
--td-tab-track-radius | 8rpx | -
187190
--td-tab-track-thickness | 6rpx | -
188-
--td-tab-track-width | 32rpx | -
191+
--td-tab-track-width | 32rpx | -

‎src/tabs/props.ts

+5
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@ const props: TdTabsProps = {
1010
animation: {
1111
type: Object,
1212
},
13+
/** 激活下划线的模式 */
14+
bottomLineMode: {
15+
type: String,
16+
value: 'fixed',
17+
},
1318
/** 组件类名，分别用于设置 组件外层元素、选项卡单项、选项卡激活态、滚动条样式类名 等类名 */
1419
externalClasses: {
1520
type: Array,

‎src/tabs/tabs.ts

+10-8
Original file line numberDiff line numberDiff line change
@@ -171,16 +171,17 @@ export default class Tabs extends SuperComponent {
171171
},
172172

173173
getTrackSize() {
174+
const { bottomLineMode } = this.properties;
175+
const targetMap = {
176+
fixed: `.${prefix}-tabs__track`,
177+
auto: `.${prefix}-tabs__item--active .${prefix}-tabs__item-inner`,
178+
full: `.${prefix}-tabs__item--active`,
179+
};
174180
return new Promise<number>((resolve, reject) => {
175-
if (this.trackWidth) {
176-
resolve(this.trackWidth);
177-
return;
178-
}
179-
getRect(this, `.${prefix}-tabs__track`)
181+
getRect(this, targetMap[bottomLineMode] || targetMap.fixed)
180182
.then((res) => {
181183
if (res) {
182-
this.trackWidth = res.width;
183-
resolve(this.trackWidth);
184+
resolve(res.width);
184185
}
185186
})
186187
.catch(reject);
@@ -221,13 +222,14 @@ export default class Tabs extends SuperComponent {
221222
getObserver(this, `.${name}`).then(() => this.setTrack());
222223
}
223224

225+
const trackLineWidth = await this.getTrackSize();
224226
if (this.data.theme === 'line') {
225-
const trackLineWidth = await this.getTrackSize();
226227
distance += (rect.width - trackLineWidth) / 2;
227228
}
228229
this.setData({
229230
trackStyle: `-webkit-transform: translateX(${distance}px);
230231
transform: translateX(${distance}px);
232+
width:${trackLineWidth}px;
231233
`,
232234
});
233235
} catch (err) {

‎src/tabs/type.ts

+8
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,14 @@ export interface TdTabsProps {
1414
type: ObjectConstructor;
1515
value?: TabAnimation;
1616
};
17+
/**
18+
* 激活下划线的模式
19+
* @default fixed
20+
*/
21+
bottomLineMode?: {
22+
type: StringConstructor;
23+
value?: 'fixed' | 'auto' | 'full';
24+
};
1725
/**
1826
* 组件类名，分别用于设置 组件外层元素、选项卡单项、选项卡激活态、滚动条样式类名 等类名
1927
*/

0 commit comments

Comments
 (0)