uni-app 自定义 tabbar 实例分析

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

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

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

新建 tabbar.vue 组件

<block v-for="(item,index) in tabList" :key="index"> <view class="navigator" :class="currentTabIndex == index ? 'on' : ''" @tap="switchTab(index)"> <view class="icon"> <text class="iconfont" :class="item.icon" :style="[currentTabIndex == index ? {'color': tintColor} : {'color': color}]"></text> <text v-if="item.badge" class="uni_badge">{{item.badge}}</text> <text v-if="item.badgeDot" class="uni_badge uni_badge_dot"></text> </view> <view class="text" :style="[currentTabIndex == index ? {'color': tintColor} : {'color': color}]">{{item.text}}</view> </view> </block> 

uni-app 自定义 tabbar 选项配置

<script> export default { data() { return { tabList: [ { icon: 'icon-emotion', text: 'tab01', badge: 1 }, { icon: 'icon-qianbao', text: 'tab02', }, { icon: 'icon-choose01', text: 'tab03', badgeDot: true } ], currentTabIndex: this.current } }, props: { current: { type: [Number, String], default: 0 }, backgroundColor: { type: String, default: '#fbfbfb' }, color: { type: String, default: '#999' }, tintColor: { type: String, default: '#42b983' } }, methods: { switchTab(index){ this.currentTabIndex = index this.$emit('click', index) } }, } </script> 

在 main.js 里面引入全局组件

import tabBar from './components/tabbar.vue' Vue.component('tab-bar', tabBar) 

此时的 tab-bar 已经是全局组件了，只需在需要的视图页面引用即可

<tab-bar :current="currentTabIndex" backgroundColor="#fbfbfb" color="#999" tintColor="#42b983" @click="tabClick"></tab-bar> 

<tab-bar :current="2" backgroundColor="#1a4065" color="#c3daf1" tintColor="#02f32b" @click="tabClick"></tab-bar> 

作者：xiaoyan2015
链接： https://juejin.im/post/5d88f588518825727d44cfad
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。