在使用uniapp开发产品的时候，官方的tabBar总是满足不了设计稿上面的要求。通常这时候都会自定义tabBar，但是自定义会牺牲一些用户体验，比如在切换的时候tabBar会闪烁，特别是用户的硬件不太高端的时候闪烁得更加明显，还有自定义tabBar使用uni.redirectTo的话切换页面每次都会调用onLoad，页面数据得不到缓存。
既然这样我尝试使用了官方tabBar的同时使用自定义的tabBar，就是在tabBar页面使用uni.hideTabBar({})将官方的tabBar隐藏，但是有一个小缺点就是打开小程序时并且首屏是tabBar页面会先隐藏官方tabBar再让自定义tabBar回到底部，不过没有关系。
首先先在pages.josn中把需要tabBar设置好：只需要将页面路径放进去就可以
"tabBar": {
"selectedColor":"#79D5AD",
"color": "#999999",
"backgroundColor":"#ffffff",
"borderStyle": "white",
"height":"0px",
"list": [{
"pagePath":"pages/activity/activity",
"text": " "
},{
"pagePath":"pages/recommendation/recommendation",
"text": " "
},{
"pagePath":"pages/message/message",
"text": " "
},{
"pagePath":"pages/user/user",
"text": " "
}]
}
下面就是tabBar组件：这样就可以使用uni.switchTab({})路由切换tabBar页面，:style="{'padding-bottom': paddingBottomHeight + 'rpx'}"是给iphone X以上的手机tabBar适配了一个padding-bottom；
<template>
<cover-view class="tabbar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
<cover-view class="tabbar-item"
v-for="(item, index) in list"
:key="index"
@click="tabbarChange(item.path)"
>
<cover-image class="item-img" :src="item.icon_a" v-if="current == index"></cover-image>
<cover-image class="item-img" :src="item.icon" v-else></cover-image>
<cover-view class="item-name" :class="{'tabbarActive': current == index}" v-if="item.text">{{item.text}}</cover-view>
</cover-view>
</cover-view>
</template>
<script>
export default {
props: {
current: String
},
data() {
return {
paddingBottomHeight: 0, //苹果X以上手机底部适配高度
list: [{
text: '首页',
icon: '/static/images/home.png', //未选中图标
icon_a: '/static/images/home_i.png', //选中图片
path: "activity", //页面路径
},{
text: '分类',
icon: '/static/images/classify.png',
icon_a: '/static/images/classify_i.png',
path: "recommendation",
}
,{
text: '订单',
icon: '/static/images/order.png',
icon_a: '/static/images/order_i.png',
path: 'message',
},{
text: '我的',
icon: '/static/images/me.png',
icon_a: '/static/images/me_i.png',
path: "user",
},
]
};
},
created() {
let that = this;
uni.getSystemInfo({
success: function (res) {
let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
model.forEach(item => {
//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
that.paddingBottomHeight = 40;
}
})
}
});
},
methods: {
tabbarChange(path) {
uni.switchTab({
url: path
})
}
}
};
下面使用tabBar页面引入自定义tabBar组件：记得加上uni.hideTabBar({})把官方tabBar隐藏
<template>
<view>
<view-tabbar :current="0"></view-tabbar>
</view>
</template>
<script>
import Tabbar from '@/components/tabbar.vue'
export default {
components: {
'view-tabbar': Tabbar
},
onShow() {
uni.hideTabBar({
animation: false
})
},
}
</script>
iphone X以下和安卓端的效果
iphone X以上的效果
最后上组件的完整代码：
<template>
<cover-view class="tabbar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
<cover-view class="tabbar-item"
v-for="(item, index) in list"
:key="index"
@click="tabbarChange(item.path)"
>
<cover-image class="item-img" :src="item.icon_a" v-if="current == index"></cover-image>
<cover-image class="item-img" :src="item.icon" v-else></cover-image>
<cover-view class="item-name" :class="{'tabbarActive': current == index}" v-if="item.text">{{item.text}}</cover-view>
</cover-view>
</cover-view>
</template>
<script>
export default {
props: {
current: String
},
data() {
return {
paddingBottomHeight: 0, //苹果X以上手机底部适配高度
list: [{
text: '首页',
icon: '/static/images/home.png', //未选中图标
icon_a: '/static/images/home_i.png', //选中图片
path: "activity", //页面路径
},{
text: '分类',
icon: '/static/images/classify.png',
icon_a: '/static/images/classify_i.png',
path: "recommendation",
}
,{
text: '订单',
icon: '/static/images/order.png',
icon_a: '/static/images/order_i.png',
path: 'message',
},{
text: '我的',
icon: '/static/images/me.png',
icon_a: '/static/images/me_i.png',
path: "user",
},
]
};
},
created() {
let that = this;
uni.getSystemInfo({
success: function (res) {
let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
model.forEach(item => {
//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
that.paddingBottomHeight = 40;
}
})
}
});
},
watch: {
},
methods: {
tabbarChange(path) {
uni.switchTab({
url: path
})
}
}
};
</script>
<style lang="scss" scoped>
.tabbarActive{
color: #79D5AD !important;
}
.tabbar{
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 100rpx;
background-color: #ffffff;
.tabbar-item{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100rpx;
.item-img{
margin-bottom: 4rpx;
width: 46rpx;
height: 46rpx;
}
.item-name{
font-size: 26rpx;
color: #A3A3A3;
}
}
}
</style>
