UniApp自定义底部导航 tabBar 凸起展示效果（底部导航栏）

目前这个组件只支持至多四个导航，ƪ(˘⌣˘)ʃ 毕竟元素大小是固定的，太小的话就不好看了

平台兼容性

构建自定义导航栏文件

在根目录创建component文件夹 用于存放自定义组件

创建自定义底部导航 tabBar 文件

代码结构如下

<!--miniprogram/custom-tab-bar/index.wxml-->
	<view class="tab-bar">
		<view class="tab-bar-border"></view>
		<template v-for="(item,index) in list">
			<view :class="['tab-bar-item',selected==index?'active':'']" @click="switchTab(item.pagePath,index)">
				<image :src="selected != index ? item.selectedIconPath : item.iconPath"></image>
				<view class="span" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
			</view>
		</template>
		
		<view class="tabbar-bg">
			<!-- 悬浮球 -->
			<view class="false-active-bg" :style="{left:8.5+selected*(100/list.length)+'vw'}"></view>
		</view>
	</view>
	

示例(可以直接复制以下这段代码到使用处)

const list = reactive(
		[{
			"pagePath": "/pages/index/index",
			"iconPath": "/static/logo.png",
			"selectedIconPath": "/static/logo.png",
			"text": "首页"
		}, {
			"pagePath": "/pages/index1/index1",
			"iconPath": "/static/logo.png",
			"selectedIconPath": "/static/logo.png",
			"text": "列表"
		},
		{
			"pagePath": "/pages/index2/index2",
			"iconPath": "/static/logo.png",
			"selectedIconPath": "/static/logo.png",
			"text": "我的"
		}
		]
	)

js

import { reactive, ref, onMounted } from 'vue';
	import { onShow, onLoad } from '@dcloudio/uni-app'
	// 默认选中的下标
	const prop = defineProps(['selected'])
	// 设置当前选中 下标
	const selected = ref(prop.selected)
	const color = ref("#7A7E83")
	const selectedColor = ref("#3cc51f")
	// tabbar列表
	const list = reactive(
		[{
			"pagePath": "/pages/index/index",
			"iconPath": "/static/logo.png",
			"selectedIconPath": "/static/logo.png",
			"text": "首页"
		}, {
			"pagePath": "/pages/index1/index1",
			"iconPath": "/static/logo.png",
			"selectedIconPath": "/static/logo.png",
			"text": "列表"
		},
		{
			"pagePath": "/pages/index2/index2",
			"iconPath": "/static/logo.png",
			"selectedIconPath": "/static/logo.png",
			"text": "我的"
		}
		]
	)

	onLoad(() => {
		// 隐藏 系统 tabbar
		uni.hideTabBar()
	})

	onShow(() => {
		// 获取 上次 被选中的下标
		const oldIndex = uni.getStorageSync('oldIndex')
		// 判断是否第一次 访问
		if (oldIndex) {
			// 不是第一次 设置当前选中下标
			selected.value = oldIndex
		}
		// 100毫秒后 切换 为新的小标
		setTimeout(() => {
			selected.value = prop.selected
		}, 100)
		// 存储 本次被选中的 下标
		uni.setStorageSync('oldIndex', prop.selected)
	})

	// 切换 路由
	function switchTab(url, index) {
		uni.switchTab({ url })
		selected.value = index
	}

css

.tab-bar {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 10vh;
		background: white;
		display: flex;
		justify-content: space-around;
		padding-bottom: env(safe-area-inset-bottom);
		pointer-events: auto;
	}

	.tab-bar-border {
		background-color: rgba(0, 0, 0, 0.33);
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 1px;
		transform: scaleY(0.5);
	}

	.tab-bar-item {
		height: 10vh;
		position: relative;
		display: flex;
		z-index: 3;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		transition: 0.5s;
	}

	.tab-bar-item .span {
		position: absolute;
		bottom: -4vw;
		display: block;
		font-size: small;
		opacity: 0;
		transition: 0.5;
		width: 20vw;
		text-align: center;
	}

	.tab-bar-item image {
		width: 35px;
		height: 35px;
		line-height: 1;
	}

	.active {
		transform: translateY(-7.5vw);
		color: white;
	}

	.active .span {
		color: #3cc51f;
		font-size: small;
		opacity: 1;
	}


	.tabbar-bg {
		position: absolute;
		top: 0;
		left: 0;
		height: 10vh;
		width: 100%;
		z-index: 1;
		box-shadow: 0px -2px 6px rgba(159, 159, 159, 0.366);
	}

	.false-active-bg {
		position: absolute;
		background-color: #3cc51f;
		border-radius: 50%;
		width: 60px;
		height: 60px;
		top: -4vh;
		z-index: 2;
		transition: 0.3s;
	}