uniapp - 微信小程序 - 自定义底部tabbar

废话不多说，直接行源码

这里需要的底部tabbar的图片在这里我的资源里面呢

图片是这样的

先看成品吧

在这里插入图片描述

首先 - `BaseApp\components\Tabbar.vue`


<script setup>
	import {
		ref,
		nextTick,
		watch
	} from "vue"

	// 核心 - 隐藏uniapp自带的底部tabbar
	uni.hideTabBar()

	let current = ref(0)

	const list = ref(
		[{
			pagePath: "pages/index/index",
			iconPath: '../static/tab/11.png',
			selectedIconPath: "../static/tab/1.png",
			text: "index"
		}, {
			pagePath: "pages/warn/index",
			iconPath: '../static/tab/22.png',
			selectedIconPath: "../static/tab/2.png",
			text: "warn"
		}, {
			pagePath: "pages/my/index",
			iconPath: '../static/tab/33.png',
			selectedIconPath: "../static/tab/3.png",
			text: "my"
		}, {
			pagePath: "pages/user/index",
			iconPath: '../static/tab/44.png',
			selectedIconPath: "../static/tab/4.png",
			text: "user"
		}, {
			pagePath: "pages/sign/index",
			iconPath: '../static/tab/55.png',
			selectedIconPath: "../static/tab/5.png",
			text: "sign"
		}]
	)

	const changeTab = (e) => {
		uni.switchTab({
			url: `/${list.value[e].pagePath}`,
		})
	}

	// const props = defineProps(['current'])
	const props = defineProps({
		current: {
			type: String, // 或者其他你需要的类型  
			required: true // 如果这个 prop 是必需的  
		}
	})
	console.log('props=', props)
	current.value = props.current
</script>

<template>
	<view class="tabbar">

		<!-- 根据tabbar个数的多少, 调整.tabbar-item样式中的padding即可 -->
		<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">
					<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>

<style>
	.tabbar {
		/* 1.5vh: 视口高度的1.5% */
		font-size: 1.5vh;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		width: 100%;
		/* 6vh: 视口高度的6% */
		height: 6vh;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #fff;
		padding: 20rpx 0;
	}

	.tabbar-item {
		height: 100%;
		padding: 0 20rpx;
		/* 根据tabbar个数的多少, 调整.tabbar-item样式中的padding即可 */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.select, {
		width: 10vh;
		height: 10vh;
		/* border-radius: 10vh; */
		/* margin-bottom: 4vh; */
		/* background-color: #086d5b; */
		position: relative;
	},

	.i-t {
		font-size: 1.5vh;
		padding: 2vw 2vh;
		position: absolute;
		bottom: 1vh;
	}

	.img ,{
		height: 3vh;
		width: 2.5vh;
		/* 4vw: 视口宽度的4% */
		margin: 0 4vw;
	},

	.imgactive, {
		height: 3.5vh;
		width: 3.2vh;
		margin: 0 2.2vw;
	}

	.text {,
		text-align: center;
		color: #CACACA;
	},

	.text, .active {
		color: #fff;
	}
</style>

其次 - pages.json


{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "index"
			}
		}, {
			"path": "pages/warn/index",
			"style": {
				"navigationBarTitleText": "告警",
				"enablePullDownRefresh": false
			}
		}, {
			"path": "pages/my/index",
			"style": {
				"navigationBarTitleText": "我的",
				"enablePullDownRefresh": false
			}
		}, {
			"path": "pages/user/index",
			"style": {
				"navigationBarTitleText": "其他",
				"enablePullDownRefresh": false
			}
		}, {
			"path": "pages/sign/index",
			"style": {
				"navigationBarTitleText": "标签",
				"enablePullDownRefresh": false
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	
	// 主要是这里的：tabbar -------------------------------------------------------
	"tabBar": {
		"height": "0",
		// "color": "#7A7E83",
		// "selectedColor": "#55ffff",
		// "backgroundColor": "#55ff7f",
		"list": [
			{
				"pagePath": "pages/index/index"
			},
			{
				"pagePath": "pages/warn/index"
			},
			{
				"pagePath": "pages/my/index"
			},
			{
				"pagePath": "pages/user/index"
			},
			{
				"pagePath": "pages/sign/index"
			}
		]
	},
	"uniIdRouter": {}

}

再然后 - 在别的.vue组件中这样使用

BaseApp\pages\my.vue


<template>
	<text class="title">{{title}}</text>
	
	<tabbar :current='2'></tabbar>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	
	import tabbar from '../../components/Tabbar.vue'

	let title = ref('我的')
</script>

<style></style>