uniapp 微信小程序自定义tabbar

为什么要自定义？自定义tabbar可做事件拦截，可自定义样式等。

第一步：隐藏原生tabbar

第二步：page.json 中定义路径

 第三步：创建自定义组件

目录

 代码

<template>
	<view class='tabbar'>
		<view 
			class='tab' 
			v-for="(item,index) in tabbarList" 
			:key='index'
			@tap='navigatorTo(item.pagePath)'
		 >
			<image v-if=' item.pagePath === cureentPage ' :src="item.selectedIconPath" mode=""></image>
			<image v-else :src="item.iconPath" mode=""></image>
			<view class='text'>{{item.text}}</view>
		</view>
	</view>
</template>
 
<script>
export default{
	props:{
		cureentPage:{
			type:String,
			default:'index'
		}
	},
	data () {
		return {
			tabbarList:[
				{
					"pagePath": "index",
					"iconPath":"/static/index.png",
					"selectedIconPath":"/static/indexed.png",
					"text": "首页"
				}, 
				{
					"pagePath": "hospital",
					"iconPath":"/static/hospital.png",
					"selectedIconPath":"/static/hospitaled.png",
					"text": "医院"
				},
				{
					"pagePath": "register",
					"iconPath":"/static/register.png",
					"selectedIconPath":"/static/registered.png",
					"text": "挂号"
				},
				{
					"pagePath": "mine",
					"iconPath":"/static/mine.png",
					"selectedIconPath":"/static/mineed.png",
					"text": "我的"
				}
			]
		}
	},
	methods:{
		navigatorTo(e){
           uni.switchTab({
           	url:`../../pages/${e}/${e}`
           })
		}
	}
}
</script>
 
<style scoped>
.tabbar{
	/* border-top:2rpx solid #636263; */
	background-color: #FFFFFF;
	z-index: 9999;
	position: fixed;
	left:0;
	bottom:0;
	width:100%;
	height: 120rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.tab{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
image{
	width: 40rpx;
	height: 40rpx;
}
.text{
	padding:10rpx 0;
	font-size:24rpx;
}
</style>

　　第四步：页面引用

页面使用：<TabBar cureentPage='index'></TabBar>

组件引入：import TabBar from '@/components/Tabbar/Tabbar.vue';

组件注册：components:{TabBar},

最终效果：

 世界名表维修，维修价目表，为什么这么多富豪喜欢买表？点击看这里