Skip to content

Commit eb78f07

Browse files
novlan1tdesign-bot
novlan1
and
tdesign-bot
authored
feat(uniapp): support url/linkType in tabbar (#4546)
* docs: update tdesign uniapp homepage * chore: 首页demo不显示返回按钮 * chore: update docs home text * perf: 修复鸿蒙下count-down组件的cppcrash问题 * chore: update form demo style * chore: update form demo * chore: update form demo * chore: update harmony dmeo * feat: 使用统一的示例图片地址 * fix(textarea): 修复autosize下无法滑动问题 * feat: support url/linkType * chore: stash changelog [ci skip] --------- Co-authored-by: tdesign-bot <tdesign@tencent.com>
1 parent 2e9fa26 commit eb78f07

8 files changed

Lines changed: 72 additions & 2 deletions

File tree

‎packages/tdesign-uniapp/.changelog/pr-4546.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
pr_number: 4546
3+
contributor: novlan1
4+
---
5+
6+
- feat(Navbar): 新增 `isHiddenInSpecialScene` 属性，表示是否销毁导航栏，仅场景值为 1433、1434、1177、1175 时有效 @novlan1 ([#4546](https://github.com/Tencent/tdesign-miniprogram/pull/4546))
7+
- feat(TabBar): `TabBarItem` 新增 `url` 和 `linkType` 属性 @novlan1 ([#4546](https://github.com/Tencent/tdesign-miniprogram/pull/4546))

‎packages/uniapp-components/navbar/navbar.vue‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
22
<view
3+
v-if="!(isSpecialScene && isHiddenInSpecialScene)"
34
:class="'' + tools.cls(classPrefix, [['fixed', fixed]]) + ' ' + visibleClass + ' ' + tClass"
45
:style="'' + tools._style([boxStyle, customStyle])"
56
>
@@ -47,6 +48,24 @@ const BASE_MENU_RECT = {
4748
right: 10, // 距离右侧的间距，实际 right 值在 getMenuRect 中动态计算
4849
};
4950
51+
// 这些场景下 wx.getMenuButtonBoundingClientRect 不可用或取值不可靠，需跳过调用
52+
// 1433（半屏小程序）、1434（半屏小程序-从聊天素材打开）、1177（视频号直播间）、1175（视频号profile页）
53+
const SKIP_MENU_RECT_SCENES = [1433, 1434, 1177, 1175];
54+
55+
/** 判断当前是否处于特殊场景（半屏、视频号等） */
56+
const checkSpecialScene = () => {
57+
let isSpecial = false;
58+
// #ifdef MP-WEIXIN
59+
try {
60+
const { scene } = uni.getLaunchOptionsSync ? uni.getLaunchOptionsSync() : {};
61+
isSpecial = SKIP_MENU_RECT_SCENES.includes(scene);
62+
} catch (e) {
63+
isSpecial = false;
64+
}
65+
// #endif
66+
return isSpecial;
67+
};
68+
5069
export default {
5170
components: {
5271
TIcon,
@@ -81,6 +100,7 @@ export default {
81100
showTitle: '',
82101
hideLeft: false,
83102
hideCenter: false,
103+
isSpecialScene: false, // 是否处于特殊场景
84104
iMenuRect: null,
85105
iLeftRect: null,
86106
iBoxStyle: {},
@@ -116,6 +136,12 @@ export default {
116136
117137
mounted() {
118138
this.onWatchTitle();
139+
140+
const isSpecialScene = checkSpecialScene();
141+
if (isSpecialScene) {
142+
this.isSpecialScene = isSpecialScene;
143+
}
144+
119145
this.initStyle();
120146
this.getLeftRect();
121147
this.onMenuButtonBoundingClientRectWeightChange();
@@ -193,6 +219,8 @@ export default {
193219
},
194220
195221
getMenuRect(windowInfo) {
222+
if (this.isSpecialScene) return;
223+
196224
const curWindowInfo = windowInfo || getWindowInfo();
197225
// 场景值为1177（视频号直播间）和1175 （视频号profile页）时，小程序禁用了 uni.getMenuButtonBoundingClientRect
198226
let rect = {
@@ -250,7 +278,7 @@ export default {
250278
goBack() {
251279
const { delta } = this;
252280
// eslint-disable-next-line
253-
const that = this;
281+
const that = this;
254282
this.$emit('go-back');
255283
if (delta > 0) {
256284
uni.navigateBack({

‎packages/uniapp-components/tab-bar-item/props.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
55
* */
66

7+
import type { TdTabBarItemProps } from './type';
78
export default {
89
/** 图标右上角提示信息 */
910
badgeProps: {
@@ -14,10 +15,24 @@ export default {
1415
icon: {
1516
type: [String, Object],
1617
},
18+
/** 页面跳转类型 */
19+
linkType: {
20+
type: String,
21+
default: 'redirectTo' as TdTabBarItemProps['linkType'],
22+
validator(val: TdTabBarItemProps['linkType']): boolean {
23+
if (!val) return true;
24+
return ['redirectTo', 'switchTab', 'reLaunch', 'navigateTo'].includes(val);
25+
},
26+
},
1727
/** 二级菜单 */
1828
subTabBar: {
1929
type: Array,
2030
},
31+
/** 点击后跳转的页面路径, 需要以 `/` 开头 */
32+
url: {
33+
type: String,
34+
default: '',
35+
},
2136
/** 标识符 */
2237
value: {
2338
type: [String, Number],

‎packages/uniapp-components/tab-bar-item/tab-bar-item.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -172,13 +172,17 @@ export default {
172172
this.isSpread = true;
173173
},
174174
toggle() {
175-
const { currentName, hasChildren, isSpread } = this;
175+
const { currentName, hasChildren, isSpread, url, linkType } = this;
176176
177177
if (hasChildren) {
178178
this.isSpread = !isSpread;
179179
}
180180
this[RELATION_MAP.TabBarItem].updateValue(currentName);
181181
this[RELATION_MAP.TabBarItem].changeOtherSpread(currentName);
182+
183+
if (url && uni[linkType]) {
184+
uni[linkType]({ url });
185+
}
182186
},
183187
selectChild(event) {
184188
const { value } = event.target.dataset;

‎packages/uniapp-components/tab-bar-item/type.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,20 @@ export interface TdTabBarItemProps {
1616
* 图标名称。传入对象时透传至 Icon 组件
1717
*/
1818
icon?: string | object;
19+
/**
20+
* 页面跳转类型
21+
* @default redirectTo
22+
*/
23+
linkType?: 'redirectTo' | 'switchTab' | 'reLaunch' | 'navigateTo';
1924
/**
2025
* 二级菜单
2126
*/
2227
subTabBar?: SubTabBarItem[];
28+
/**
29+
* 点击后跳转的页面路径, 需要以 `/` 开头
30+
* @default ''
31+
*/
32+
url?: string;
2333
/**
2434
* 标识符
2535
*/

‎packages/uniapp-components/tab-bar/README.en-US.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,9 @@ name | type | default | description | required
3838
custom-style | Object | - | CSS(Cascading Style Sheets) | N
3939
badge-props | Object | {} | Typescript: `BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/tab-bar-item/type.ts) | N
4040
icon | String / Object | - | \- | N
41+
link-type | String | redirectTo | options: redirectTo/switchTab/reLaunch/navigateTo | N
4142
sub-tab-bar | Array | - | Typescript: `SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/tab-bar-item/type.ts) | N
43+
url | String | - | \- | N
4244
value | String / Number | - | \- | N
4345

4446
### TabBarItem Slots

‎packages/uniapp-components/tab-bar/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,9 @@ t-class | 根节点样式类
8686
custom-style | Object | - | 自定义样式 | N
8787
badge-props | Object | {} | 图标右上角提示信息。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/tab-bar-item/type.ts) | N
8888
icon | String / Object | - | 图标名称。传入对象时透传至 Icon 组件 | N
89+
link-type | String | redirectTo | 页面跳转类型。可选项：redirectTo/switchTab/reLaunch/navigateTo | N
8990
sub-tab-bar | Array | - | 二级菜单。TS 类型：`SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/tab-bar-item/type.ts) | N
91+
url | String | - | 点击后跳转的页面路径, 需要以 `/` 开头 | N
9092
value | String / Number | - | 标识符 | N
9193

9294
### TabBarItem Slots

‎packages/uniapp-components/tab-bar/_example/custom/index.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
:value="item.value"
88
:icon="item.icon"
99
:aria-label="item.ariaLabel"
10+
:url="item.url"
1011
/>
1112
</t-tab-bar>
1213
</view>
@@ -38,6 +39,7 @@ export default {
3839
value: 'label_3',
3940
icon: 'chat',
4041
ariaLabel: '聊天',
42+
url: '/pages-more/chat-list/chat-list',
4143
},
4244
{
4345
value: 'label_4',

0 commit comments

Comments
 (0)