uniapp 自定义底部tabbar，支持底部安全区和占位符_uniapp tabbar 底部安全区域

 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()
}