uniapp自定义凸出的导航栏

page.json

{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path" : "pages/tabs/tabs",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}

tabs.vue

<template>
<div>
<swiper :style="'min-height:'+height+'px'" :current="active" duration="0" @change="swiperChange">
<swiper-item>
<div class="swiper-item">首页</div>
</swiper-item>
<swiper-item>
<div class="swiper-item" style="background-color: #20D785;">分类</div>
</swiper-item>
<swiper-item>
<div class="swiper-item" style="background-color: #307DCA;">发布</div>
</swiper-item>
<swiper-item>
<div class="swiper-item" style="background-color: #6641E2;">购物车</div>
</swiper-item>
<swiper-item>
<div class="swiper-item" style="background-color: #FF4081;">我的</div>
</swiper-item>
</swiper>
<div class="tab">
<div :class="active==0?'item active':'item'" @click="active=0">
<div>
<image class="tabbar-icon" src="../../static/image/tabbar/icon_homed.png" v-if="active==0"></image>
<image class="tabbar-icon" src="../../static/image/tabbar/icon_home.png" v-else></image>
</div>
<div>首页</div>
</div>
<div :class="active==1?'item active':'item'" @click="active=1">
<div>
<image class="tabbar-icon" src="../../static/image/tabbar/icon_worked.png" v-if="active==1"></image>
<image class="tabbar-icon" src="../../static/image/tabbar/icon_work.png" v-else></image>
</div>
<div>任务</div>
</div>
<div :class="active==2?'item-add active':'item-add'" @click="active=2">
<image class="middle-tab" src="../../static/image/tabbar/icon_add.png"></image>
</div>
<div :class="active==3?'item active':'item'" @click="active=3">
<div>
<image class="tabbar-icon" src="../../static/image/tabbar/icon_dynamiced.png" v-if="active==3"></image>
<image class="tabbar-icon" src="../../static/image/tabbar/icon_dynamic.png" v-else></image>
</div>
<div>动态</div>
</div>
<div :class="active==4?'item active':'item'" @click="active=4">
<div>
<image class="tabbar-icon" src="../../static/image/tabbar/icon_mined.png" v-if="active==4"></image>
<image class="tabbar-icon" src="../../static/image/tabbar/icon_mine.png" v-else></image>
</div>
<div>我的</div>
</div>
</div>
</div>
</template>

<script>
export default {
data() {
return {
active: 0,
height:0
}
},
methods:{
swiperChange(e) {
this.active = e.detail.current;
}
},
onLoad:function(){
uni.getSystemInfo({
success:res=>{
this.height = res.screenHeight;
}
})
}
}
</script>
<style lang="less">
.middle-tab{
120rpx;
height: 120rpx;
margin-top: -60rpx;
}
.tabbar-icon{
54rpx;
height: 54rpx;
margin-top: 6rpx;
}
.swiper-item {
display: flex;
100%;
height: 100%;
text-align: center;
justify-content: center;
align-items: center;
}
.tab{
position: fixed;
z-index: 999;
height: 100rpx;
100%;
bottom: 0;
background-color: #FFFFFF;
display: flex;
border-radius: 20px 20px 0px 0px;
box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1);
.item-add {
20%;
color: #929292;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
position: relative;
text-align: center;
.text {
font-size: 24rpx;
padding-top: 36rpx;
}
}
.item {
20%;
color: #929292;
font-size: 24rpx!important;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
}
.active {
color: #FECB40 !important;
}
</style>

效果如图：