Appearance
底部导航栏组件 (c-tabbar)
底部导航栏组件提供了自定义的底部 tabbar 功能，支持普通 tab 切换和中间突出按钮，可以完全替代原生 tabbar，提供更灵活的样式定制和交互控制。
基本用法
vue
<template>
<view class="tabbar-page">
<!-- 页面内容区域 -->
<view class="content-area" :style="{ paddingBottom: '100rpx' }">
<view v-if="currentTab === 0" class="tab-content">
<text>首页内容</text>
</view>
<view v-if="currentTab === 1" class="tab-content">
<text>游戏内容</text>
</view>
<view v-if="currentTab === 3" class="tab-content">
<text>消息内容</text>
</view>
<view v-if="currentTab === 4" class="tab-content">
<text>我的内容</text>
</view>
</view>
<!-- 自定义底部导航栏 -->
<c-tabbar :selected="currentTab" @change="handleTabChange"></c-tabbar>
</view>
</template>
<script>
export default {
data() {
return {
currentTab: 0
}
},
methods: {
handleTabChange(index) {
this.currentTab = index;
console.log('当前选中tab:', index);
}
},
onLoad() {
// 根据当前页面路径设置选中状态
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
const route = currentPage.route;
if (route.includes('home')) {
this.currentTab = 0;
} else if (route.includes('game')) {
this.currentTab = 1;
} else if (route.includes('message')) {
this.currentTab = 3;
} else if (route.includes('mine')) {
this.currentTab = 4;
}
}
}
</script>
<style lang="scss" scoped>
.tabbar-page {
height: 100vh;
display: flex;
flex-direction: column;
}
.content-area {
flex: 1;
overflow-y: auto;
}
.tab-content {
padding: 40rpx;
text-align: center;
font-size: 32rpx;
color: #333;
}
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
自定义 tabbar 配置
组件内置了默认的 tabbar 配置，包含5个tab项：
<augment_code_snippet path="docs/frontEnd/mobileTerminal/components/c-tabbar/c-tabbar.vue" mode="EXCERPT">
javascript
tabbarList: [
{
pagePath: "/pages/tabbar/home",
text: "首页",
iconPath: "/static/tabbar/tabbar1.png",
selectedIconPath: "/static/tabbar/tabbar1-a.png",
},
{
pagePath: "/pages/tabbar/publish",
text: "发布",
iconPath: "/static/tabbar/tabbar3.png",
selectedIconPath: "/static/tabbar/tabbar3-a.png",
midButton: true, // 中间突出按钮
}
]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
</augment_code_snippet>
属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| selected | Number | 0 | 当前选中的 tab 索引 |
| midButton | Boolean | false | 是否启用中间突出按钮（预留属性） |
事件说明
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | tab 切换时触发 | index: 选中的 tab 索引 |
tabbarList 配置项说明
每个 tab 项支持以下配置：
| 属性名 | 类型 | 说明 |
|---|---|---|
| pagePath | String | 页面路径，用于路由跳转 |
| text | String | tab 显示文字 |
| iconPath | String | 未选中状态的图标路径 |
| selectedIconPath | String | 选中状态的图标路径 |
| midButton | Boolean | 是否为中间突出按钮 |
路由配置
使用此组件需要在 pages.json 中配置对应的页面路由：
json
{
"pages": [
{
"path": "pages/tabbar/home",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/tabbar/game",
"style": {
"navigationBarTitleText": "游戏"
}
},
{
"path": "pages/tabbar/publish",
"style": {
"navigationBarTitleText": "发布"
}
},
{
"path": "pages/tabbar/message",
"style": {
"navigationBarTitleText": "消息"
}
},
{
"path": "pages/tabbar/mine",
"style": {
"navigationBarTitleText": "我的"
}
}
],
"tabBar": {
"custom": true,
"list": [
{
"pagePath": "pages/tabbar/home",
"text": "首页"
},
{
"pagePath": "pages/tabbar/game",
"text": "游戏"
},
{
"pagePath": "pages/tabbar/publish",
"text": "发布"
},
{
"pagePath": "pages/tabbar/message",
"text": "消息"
},
{
"pagePath": "pages/tabbar/mine",
"text": "我的"
}
]
}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
实现原理
组件基于以下核心逻辑实现：
- tabbarList 配置：内置默认的5个tab配置，包含页面路径、文字、图标等信息
- 智能路由跳转：
- 普通 tab 使用
uni.switchTab()进行 tabbar 页面切换 - 中间按钮使用
uni.navigateTo()跳转到普通页面
- 普通 tab 使用
- 状态管理：通过
selected属性控制当前选中状态，点击时触发change事件 - 样式设计：固定定位在底部，支持中间按钮突出效果，自动适配安全区域
<augment_code_snippet path="docs/frontEnd/mobileTerminal/components/c-tabbar/c-tabbar.vue" mode="EXCERPT">
javascript
handleTabClick(index) {
// 发射事件给父组件
this.$emit("change", index);
// 如果是中间按钮，可以执行特殊逻辑
if (this.tabbarList[index].midButton) {
// 中间按钮的点击逻辑，比如打开发布页面
uni.navigateTo({
url: this.tabbarList[index].pagePath,
});
} else {
// 普通 tab 切换
uni.switchTab({
url: this.tabbarList[index].pagePath,
});
}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
</augment_code_snippet>
样式特点
- 组件使用
position: fixed固定在页面底部，z-index 为 1000 - 高度为 100rpx，自动适配底部安全区域（
env(safe-area-inset-bottom)） - 顶部添加微妙的渐变阴影效果，增强层次感
- 普通 tab 激活时有 1.1 倍缩放动画效果
- 中间按钮向上突出 5rpx，采用圆形背景设计（100rpx × 100rpx）
- 选中状态文字颜色为 #1d7bf7，未选中为 #999999
注意事项
- 自定义 tabbar：使用此组件时，必须在
pages.json中设置"custom": true - 页面底部间距：由于 tabbar 是固定定位，页面内容需要预留底部空间（建议 100rpx）
- 图标资源：确保
/static/tabbar/目录下有对应的图标文件（建议 88rpx × 88rpx） - 状态同步：在各个 tab 页面的
onLoad或onShow生命周期中，需要正确设置当前选中状态 - 中间按钮：中间按钮（发布）使用
navigateTo跳转，不会切换 tab 状态 - 路由配置：所有 tabbar 页面都需要在
pages.json的tabBar.list中配置