uniapp小程序自定义底部导航栏中间凸起样式

我自己写的自定义的tabbar效果图
废话少说咱们直接上代码，一步一步来

第一步：

找到根目录下的 pages.json 文件，在 tabBar 中把 custom 设置为 true，默认值是 false。list 中设置自定义的相关信息，

pagePath： 页面路径；
iconPath： 点击前显示的图片；
selectedIconPath： 点击后显示的图片；
text： 底部导航的名称。

第二步

在根目录下创建 components 文件夹用来存放自定义tabBar组件，小伙伴们可以自定义文件夹和文件的名称。记得命名要规范哦！！！

第三步

咱也不截图了，看了那么多的文章全他妈截图，咱直接上代码方便有需要的小伙伴使用！！！！

<template>
	<view class="tabbar-container flex items-center">
		<!-- isRound是中间凸出样式的标志，用来判断当前子级是否是凸出样式的 -->
		<view :class="!item.isRound ? 'square' : 'is-square'" v-for="(item, index) in tabbarList" :key="index" @click="tabbarChange(index, item)">
			<!-- 不是凸出的子级 -->
			<template v-if="!item.isRound">
				<view class="item-top flex justify-center flex-col">
					<u-image :src="active == index ? item.selectedIconPath : item.iconPath" :width="item.width"
						:height="item.height"></u-image>
				</view>
				<view class="item-bottom" :class="{'active': active === index}">
					<text>{
   
   {
   
    item.text }}</text>
				</view>
			</template>
			<!-- 凸出的子级 -->
			<template v-else>
				<view class="flex flex-col justify-center items-center center-round">
					<view class="flex flex-col justify-center items-center">
						<u-image :src="active == index ? item.selectedIconPath : item.iconPath" :width="item.width"
							:height="item.height"></u-image>
						<text :class="{'round-active': active === index}"