uniapp自定义tabbar导航解析

最新推荐文章于 2024-07-25 10:09:53 发布

xiaoyan_2018

最新推荐文章于 2024-07-25 10:09:53 发布

阅读量2.7w

点赞数 4

分类专栏： uni-app实例文章标签： uni-app uni-app自定义tabbar uniApp底部导航

本文链接：https://blog.csdn.net/yanxinyun1990/article/details/101219095

版权

uni-app实例专栏收录该内容

15 篇文章 31 订阅

订阅专栏

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

uniapp原生导航功能尽管不错，但有时并不能满足多样化的项目需求，如：自定义背景渐变、字体图标，一些特殊图标凸显效果，这时候就只能自定义tabbar来实现功能了。

如上图：H5、小程序、App端下显示的自定义tabbar效果

图标可使用本地图片或阿里iconfont字体图标来，支持圆点提示，自定义背景、文字颜色

新建tabbar.vue组件，并在main.js里面引入全局组件

<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>

<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>

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

在相应页面引入tabbar，并自定义tabbar属性参数

<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>

点击tabbar选项，返回该选项索引值，可根据索引值显示不同页面组件。

data() {
	return {
		...
		currentTabIndex: 1
	}
},
methods: {
	tabClick(index){
		console.log('返回tabBar索引：' + index)
		this.currentTabIndex = index
	},
	...
},

好了，以上就是uni-app自定义tabbar简单实现方法。对于uni-app如何实现自定义顶部导航栏，可以看看下面这篇文章~~

https://blog.csdn.net/yanxinyun1990/article/details/100919657