单纯写个自定义tabbar,在页面切换时会闪烁,所以我们写个自定义tabbar,同时也添加官方的tabbar,但将官方tabbar隐藏掉,通过官方tabbar跳转页面就不会出现闪烁问题,但是第一次加载页面的时候也会有闪烁问题,这个官方有说明
自定义tabbar里
/**
* 底部自定义导航
* */
<template>
<view class="tab">
<view class="navView" @tap="switc('/pages/home/index/index')">
<image :src="tabname=='home'?'/static/image/homeAc.png':'/static/image/home.png'" class="navView-img"/>
<view :class="tabname=='home'?'tabTextActive':'tabText'">首页</view>
</view>
<view class="navView" @tap="switc('/pages/workOrder/index/index')">
<image :src="tabname=='workOrder'?'/static/image/workOrderAc.png':'/static/image/workOrder.png'" class="navView-img"/>
<view :class="tabname=='workOrder'?'tabTextActive':'tabText'">工单</view>
</view>
<view class="navMessage">
<view class="navMessage-box">
<image src="/static/image/message.png" class="navMessage-img"></image>
</view>
</view>
<view class="navView" @tap="switc('/pages/setType/index/index')">
<image :src="tabname=='setType'?'/static/image/setTypeAc.png':'/static/image/setType.png'" class="navView-img"/>
<view :class="tabname=='setType'?'tabTextActive':'tabText'">排版</view>
</view>
<view class="navView" @tap="switc('/pages/my/index/index')">
<image :src="tabname=='my'?'/static/image/myAc.png':'/static/image/my.png'" class="navView-img"/>
<view :class="tabname=='my'?'tabTextActive':'tabText'">我的</view>
</view>
</view>
</template>
<script>
export default{
name:"tabbar",
props:{
//当前页
tabname:{
type:String,
default:'home'
}
},
data(){
return{
}
},
methods:{
//通过官方tabbar跳转页面
switc(val){
if(!val)return;
uni.switchTab({
url:val
})
}
}
}
</script>
<style scoped>
.tab{
position: fixed;
bottom: 0;
left: 0;
display: flex;
z-index: 1;
align-items: center;
width: 100%;
height: 120rpx;
background-color: #fff;
}
.navView{
flex: 1;
text-align: center;
font-size: 0;
}
.navView-img{
width: 40rpx;
height: 40rpx;
margin-bottom: 6rpx;
}
.tabText{
font-size: 26rpx;
color: #999;
}
.tabTextActive{
font-size: 26rpx;
color: #333333;
}
.navMessage{
width: 150rpx;
height: 150rpx;
border-radius: 50%;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 10rpx;
}
.navMessage-img{
width: 60rpx;
height: 60rpx;
}
.navMessage-box{
width: 110rpx;
height: 110rpx;
background:linear-gradient(to bottom right, #ffc528 0%, #ff8054 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
</style>
pages.json里
"tabBar": {
"list":[
{
"pagePath": "pages/home/index/index",
"iconPath": "/static/image/home.png",
"selectedIconPath": "/static/image/homeAc.png",
"text": "首页"
},
{
"pagePath": "pages/workOrder/index/index",
"iconPath": "/static/image/home.png",
"selectedIconPath": "/static/image/homeAc.png",
"text": "工单"
},
{
"pagePath": "pages/setType/index/index",
"iconPath": "/static/image/home.png",
"selectedIconPath": "/static/image/homeAc.png",
"text": "排版"
},
{
"pagePath": "pages/my/index/index",
"iconPath": "/static/image/home.png",
"selectedIconPath": "/static/image/homeAc.png",
"text": "我的"
}
]
}
app.vue里,在这或许还不能够隐藏掉tabbar,uniapp会有点bug,还需要在你第一个显示的页面里隐藏一下才行
onLaunch() {
//隐藏官方的tabBar
uni.hideTabBar()
}
用的页面里
tabname指定当前是哪个页面
<tabbar tabname="home"/>