在使用uniapp開(kāi)發(fā)產(chǎn)品的時(shí)候烟零，官方的tabBar總是滿(mǎn)足不了設(shè)計(jì)稿上面的要求钱床。通常這時(shí)候都會(huì)自定義tabBar吼畏，但是自定義會(huì)犧牲一些用戶(hù)體驗(yàn)，比如在切換的時(shí)候tabBar會(huì)閃爍蛤签，特別是用戶(hù)的硬件不太高端的時(shí)候閃爍得更加明顯，還有自定義tabBar使用uni.redirectTo的話(huà)切換頁(yè)面每次都會(huì)調(diào)用onLoad栅哀，頁(yè)面數(shù)據(jù)得不到緩存震肮。
既然這樣我嘗試使用了官方tabBar的同時(shí)使用自定義的tabBar，就是在tabBar頁(yè)面使用uni.hideTabBar({})將官方的tabBar隱藏留拾，但是有一個(gè)小缺點(diǎn)就是打開(kāi)小程序時(shí)并且首屏是tabBar頁(yè)面會(huì)先隱藏官方tabBar再讓自定義tabBar回到底部戳晌，不過(guò)沒(méi)有關(guān)系。
首先先在pages.josn中把需要tabBar設(shè)置好：只需要將頁(yè)面路徑放進(jìn)去就可以
"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頁(yè)面痴柔，:style="{'padding-bottom': paddingBottomHeight + 'rpx'}"是給iphone X以上的手機(jī)tabBar適配了一個(gè)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, //蘋(píng)果X以上手機(jī)底部適配高度
list: [{
text: '首頁(yè)',
icon: '/static/images/home.png', //未選中圖標(biāo)
icon_a: '/static/images/home_i.png', //選中圖片
path: "activity", //頁(yè)面路徑
},{
text: '分類(lèi)',
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頁(yè)面引入自定義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, //蘋(píng)果X以上手機(jī)底部適配高度
list: [{
text: '首頁(yè)',
icon: '/static/images/home.png', //未選中圖標(biāo)
icon_a: '/static/images/home_i.png', //選中圖片
path: "activity", //頁(yè)面路徑
},{
text: '分類(lèi)',
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>
