uniapp实现自定义tabbar【直用版】_uniapp 自定义下方tabbar

1.pages.json中将tabBar下面全部注释掉

2.在common文件夹下面建一个tabbar文件夹，里面放个tabbar.vue（位置，名称自己随意）

tabbar.vue:(直接复制)

<template>
	<view class="tabbar">
		<view class="tab" v-for="(item,index) in tabbarList" :key="index" @tap='navigatorTo(item.pagePath)'>			
				<image v-if="item.pagePath === 'release'" :src="item.iconPath" class="addIco" @click="to_release"></image>
				<view  v-else>
					<image v-if="item.pagePath === cureentPage" :src="item.selectedIconPath"></image>
					<image v-else :src="item.iconPath"></image>
				</view>
				<!-- <view class="text"> {{item.text}} </view>		 -->
		</view>
	</view>
</template>
<script>
	export default {
		props:{
			cureentPage:{
				type:String,
				default:'index'
			}
		},		
	}
</script>
<script setup>
	const to_release=()=>{ //跳转发布页面
		uni.navigateTo({
			url:"/pages/release/release"
		})
	}
	const tabbarList=[  //自己定义的tabber
		{
			"pagePath": "index",
			"iconPath": "http://hwww.fun:6060/tabbar/zhu_pi.png",
			"selectedIconPath": "http://hwww.fun:6060/tabbar/zhu1_pi.png",
			"text": "主页"
		},
		{
			"pagePath": "release",
			"iconPath": "http://hwww.fun:6060/tabbar/add.png",
			// "selectedIconPath": "/static/img/tabbar/new2/sort1_pi.png",
			// "text": "发布"
		},
		{
			"pagePath": "myinfo",
			"iconPath": "http://hwww.fun:6060/tabbar/user_pi.png",
			"selectedIconPath": "http://hwww.fun:6060/tabbar/user1_pi.png",
			"text": "你的"
		}
	]
	
	const navigatorTo=(e)=>{  //当点击下方tabbar跳转指定页面
		console.log(e);
			uni.redirectTo({
				url:`../../pages/${e}/${e}`
			})
	}
</script>
 
<style scoped>
   .tabbar{
	   /* border-top:1rpx solid #c5c4c5; */
	   background-color:#FFFF ;
	   z-index: 999;
	   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: 50rpx;
	   height: 50rpx;
   }
   .addIco{
	   width: 50px;
	   height: 50px;
   }
</style>

3.在需要用到tabbar的位置（index，myinfo）中引入

index.vue:

<script setup>
    import Tabbar from '@/common/tabbar/tabbar.vue'
</script>

 下面代码直接放当前页面底部就行，注意传递了一个’index‘的值，这个值与tabbar中的pagePath是对应的，以此来判断该跳转哪个页面

<template>
	<Tabbar cureentPage='index'></Tabbar>
</template>

myinfo.vue

<script setup>
    import Tabbar from '@/common/tabbar/tabbar.vue'
</script>

<template>
 <Tabbar cureentPage='myinfo'></Tabbar>
</template>

 现在可以用了