tabbar组件:
<template>
<view :style="'height: '+placeholder+'rpx'">
<view class="tabbar-box">
<view class="tabbar">
<view class="item" v-for="(item,i) in tabbar" @click="toPage(item.pagePath)">
<text class="t-icon" :class="i==index?item.seletedIcon:item.icon"></text>
<view class="title">{{item.text}}</view>
</view>
</view>
<view class="placeholder" :style="'height:'+safeAreaInsetBottom+'rpx;'"></view>
</view>
</view>
</template>
<script>
import util from '../../utils/util';
export default {
data() {
return {
tabbar: [{
"pagePath": "/pages/index/index",
"icon": "t-icon-shouye-weixuanzhongtai",
"seletedIcon": 't-icon-shouye-xuanzhongtai',
"text": "首页"
},
{
"pagePath": "/pages/my/my",
"icon": "t-icon-wode-weixuanzhongtai",
"seletedIcon": 't-icon-wode-xuanzhongtai',
"text": "我的"
}
],
//底部安全区域高度
safeAreaInsetBottom: 0,
//底部占位符高度
placeholder: 0
}
},
props: {
//底部选项卡索引,用于icon高亮
index: {
type: String || Number,
default: 0
},
},
mounted() {
this.safeAreaInsetBottom = uni.getSystemInfoSync().safeAreaInsets.bottom * 2
this.$nextTick(() => {
util.computedElementHeight('.tabbar-box').then(res => {
this.placeholder = this.safeAreaInsetBottom + res
})
})
},
methods: {
toPage(url) {
uni.switchTab({
url: url
})
}
}
}
</script>
<style scoped lang="scss">
.tabbar-box {
position: fixed;
width: 100%;
background: #FFF;
z-index: 999;
bottom: 0;
.tabbar {
height: 100rpx;
display: flex;
justify-content: space-around;
align-content: center;
.item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.t-icon {
width: 50rpx;
height: 50rpx;
}
.title {
color: #8C8C8C;
font-size: 20rpx;
}
}
}
}
.placeholder {
background-color: #FFF;
}
</style>
utils工具类
//动态计算元素高度,返回值单位rpx,调用前一定要加nextTick
const computedElementHeight = async (element) => {
return new Promise((resolve, reject) => {
let query = uni.createSelectorQuery();
query.select(element).boundingClientRect(rect => {
let clientHeight = rect.height;
let clientWidth = rect.width;
let ratio = 750 / clientWidth;
let height = clientHeight * ratio;
resolve(height);
}).exec();
})
}
export default {
computedElementHeight
}
配置:
//pages.json
"tabBar": {
"custom": true,
"list": [{
"pagePath": "pages/index/index"
},
{
"pagePath": "pages/my/my"
}
]
},
//App.vue
onLaunch: function() {
uni.hideTabBar()
}