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>
现在可以用了