uniapp小程序自定义tabbar样式

一、效果

二、新建tabbar.vue页面

<template>
	<view class="tabbar" style="border-radius: 20px;border-top: 1px #f2f2f2 solid;">
		<view class	="tabbar-item" v-for="(item,index) in list" :key="index" @click="changeTab(index)">
			<view class="select" v-if="current == index">
				<view class="i-t position">
					<image class="img imgactive" mode="widthFix" :src="item.selectedIconPath" v-if="current == index"></image>
					<image class="img" mode="widthFix" :src="item.iconPath" v-else></image>
					<view class="text active" v-if="current == index">{{item.text}}</view>
					<view class="text" v-else>{{item.text}}</view>
				</view>
			</view>
			<view v-else>
				<image class="img" mode="widthFix" :src="item.selectedIconPath" v-if="current == index"></image>
				<image class="img" mode="widthFix" :src="item.iconPath" v-else></image>
				<view class="text active" v-if="current == index">{{item.text}}</view>
				<view class="text" v-else>{{item.text}}</view>
			</view>
		</view>
	</view>
</template>

<script>
    export default {
        name:"tabbar",
		props: ['current'],
        data() {
			return {
                list:[
						{
							pagePath: "pages/tabbar/tabbar-1/tabbar-1",
							iconPath: "../../static/img/tabbar/1-20.png",
							selectedIconPath: "../../static/img/tabbar/1-24.png",
							text: "首页"
						},
						{
							pagePath: "pages/tabbar/tabbar-4/tabbar-4",
							iconPath: "../../static/img/tabbar/2-22.png",
							selectedIconPath: "../../static/img/tabbar/1-29.png",
							text: "榜单"
						},
						{
							pagePath: "pages/tabbar/tabbar-5/tabbar-5",
							iconPath: "../../static/img/tabbar/1-23.png",
							selectedIconPath: "../../static/img/tabbar/1-15.png",
							text: "我的"
						}
				]
            }
        },
        created() {
		    uni.hideTabBar() 
		},
		methods: {
			changeTab(e) {
				uni.switchTab({
					url: '/' + this.list[e].pagePath,
				})
			}
		}
	}
</script>

<style>
.tabbar {
	font-size: 1.5vh;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99;
    width: 100%;
    height: 6vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
	background-color: #fff;
    padding: 20rpx 0;
}
.tabbar-item {
	height: 100%;
	padding: 0 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.img {
	height: 3vh;
    width: 2.5vh;
	margin: 0 4vw;
}
.text {
	text-align: center;
    color: #CACACA;
}
</style>

三、page.json配置tabbar

四、组件中使用

tabbar-1.vue

tabbar-4.vue

tabbar-5.vue