uniapptabbar的高度是多少_uni-app 自定义 tabbar 实例分析

上次分享了个uni-app 实现自定义导航栏 headerBar效果，今天分享下使用 uni-app 自定义 tabbar 实现方式。

uni-app 自定义动态底部导航 tabbar|仿微信 tabbar 导航栏，支持当前第几个选中、自定义背景、图片 /图标、字体颜色

如下图：分别在 H5 端、小程序、APP 端实现的自定义 tabbar 效果

uni-app 原生导航 tabBar 功能也挺好，不过有时为了满足多样化的项目需求，如：背景色渐变、字体图标，一些特殊图标凸显效果，这时候就只能自定义 tabbar 来实现功能了。

新建 tabbar.vue 组件

{ {item.badge}}

{ {item.text}}

uni-app 自定义 tabbar 选项配置

export default {

data() {

return {

tabList: [

{

icon: 'icon-emotion',

text: 'tab01',

badge: 1

},

{

icon: 'icon-qianbao',

text: 'tab02',

},

{

icon: 'icon-choose01',

text: 'tab03',

badgeDot: true