UniApp小程序支持
自定义TabBar，可以通过以下步骤实现：
1. 在 `manifest.json` 文件中设置 `
tabBar` 字段，例如：
```
"
tabBar": {
"color": "#666",
"selectedColor": "#007aff",
"backgroundColor": "#fff",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/
tabbar/home.png",
"selectedIconPath": "static/
tabbar/home
-selected.png"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "static/
tabbar/cart.png",
"selectedIconPath": "static/
tabbar/cart
-selected.png"
},
{
"pagePath": "pages/profile/profile",
"text": "我的",
"iconPath": "static/
tabbar/profile.png",
"selectedIconPath": "static/
tabbar/profile
-selected.png"
}
]
}
```
2. 在 `
App.vue` 中添加 `
tabBar` 组件，例如：
```html
<template>
<div>
<tab
-bar></tab
-bar>
<router
-view></router
-view>
</div>
</template>
<script>
import
TabBar from '@/components/
TabBar.vue'
export default {
components: {
TabBar
}
}
</script>
```
3. 在 `
TabBar.vue` 组件中实现
自定义的
TabBar 样式和交互，例如：
```html
<template>
<div class="tab
-bar">
<div
v
-for="
(item, index
) in list"
:key="index"
class="tab
-bar
-item"
:class="{active: index === selected}"
@click="onTabClick
(index
)"
>
<img :src="index === selected ? item.selectedIconPath : item.iconPath" alt="">
<span>{{ item.text }}</span>
</div>
</div>
</template>
<script>
export default {
props: {
list: {
type: Array,
required: true
},
selected: {
type: Number,
required: true
}
},
methods: {
onTabClick
(index
) {
if
(index !== this.selected
) {
uni.switchTab
({
url: this.list[index].pagePath
}
)
}
}
}
}
</script>
<style scoped>
.tab
-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify
-content: space
-around;
align
-items: center;
height: 50px;
background
-color: #fff;
box
-shadow: 0
-1px 10px rgba
(0, 0, 0, .1
);
}
.tab
-bar
-item {
display: flex;
flex
-direction: column;
justify
-content: center;
align
-items: center;
font
-size: 14px;
color: #666;
}
.tab
-bar
-item img {
width: 24px;
height: 24px;
margin
-bottom: 4px;
}
.tab
-bar
-item.active {
color: #007aff;
}
</style>
```
这样就可以实现
自定义的
TabBar 了。需要注意的是，使用
自定义的
TabBar 后，
原生的
TabBar 将不再显示。
超级会员免费看
本文介绍了在uni-app中如何自定义小程序的tabbar，由于原生tabbar无法满足UI需求，通过编写组件覆盖原生tabbar，实现所需效果。
订阅专栏 解锁全文
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
