nc.963.cn/components/fooBar/fooBar.vue

<template>
	<view class="uni-tabbar">
			<view class="uni-tabbar__item" :class="{'nav-tab-active':home===0}" @click="toIndex(0)">
				<view class="uni-tabbar__bd">
					<view class="uni-tabbar__icon">
						<image :src="home===0?'../../static/img/ceping.png': '../../static/img/index.png'"></image>
					</view>
					<view class="uni-tabbar__label">
						测评
					</view>
				</view>
			</view>
			<view class="uni-tabbar__item" :class="{'nav-tab-active':home===4}" @click="toIndex(4)">
				<view class="uni-tabbar__bd">
					<view class="uni-tabbar__icon">
						<image :src="home===4?'../../static/img/useractive.png': '../../static/img/user.png'"></image>
					</view>
					<view class="uni-tabbar__label">
						我的
					</view>
				</view>
				
			</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				home: 0,
			}
		},
		onLoad() {

		},
		methods: {
			toIndex(index) {
				this.$emit('toIndex', index)
				this.home = index
			}
		}
	}
</script>

<style scoped lang="scss">
	$navHeight:54px; //导航栏高度
	$navBoxHeight:34px; //导航栏盒子高度，XR系列底部HOME健
	.uni-tabbar {
		box-sizing: border-box;
		position: fixed;
		// left: 0;
		max-width: $uni-width;
		display: flex;
		height: 54px;
		bottom: 0;
		width: 100%;
		z-index: 998;
		background-color: rgb(255, 255, 255);
		padding-bottom: env(safe-area-inset-bottom);
		box-shadow: 0rpx 0rpx 8rpx rgba(0, 0, 0, 0.06);
	}
	.uni-tabbar__item{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		flex: 1;
		font-size: 0;
		text-align: center;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
	}
	.uni-tabbar__bd{
		position: relative;
		height: 50px;
		-webkit-flex-direction: column;
		flex-direction: column;
		cursor: pointer;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
	}
	.uni-tabbar__icon{
		position: relative;
		display: inline-block;
		margin-top: 5px;
		width: 24px;
		height: 24px;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.uni-tabbar__label{
		position: relative;
		text-align: center;
		font-size: 13px;
		line-height: 1.8;
	}
	.uni-tabbar__icon__label{
		position: absolute;
		text-align: center;
		font-size: 13px;
		width: 100px;
		bottom: 0px;
		line-height: 1.8;
	}
	.uni-tabbar__icon__diff{
		position: absolute;
		bottom: 10px;
		width: 82px;
		height: 82px;
	}
	.nav-tab-active {
		// height: 38px;
		// width: 38px;
		// line-height: 38px;
		// position: relative;
		// top: -14px;
		// left: calc(50% - 19px);
		// border-radius: 50%;
		// background: $dominantHue;
		// box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
		color: #EFD140;
	}

	// /*苹果x适配 H5APP*/
	// @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
	// 	.uni-tabbar {
	// 		height: $navHeight + $navBoxHeight;
	// 	}
	// }

	// /*苹果xs适配 H5APP*/
	// @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
	// 	.uni-tabbar {
	// 		height: $navHeight + $navBoxHeight;
	// 	}
	// }

	// /*苹果xr适配 H5APP*/
	// @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
	// 	.uni-tabbar {
	// 		height: $navHeight + $navBoxHeight;
	// 	}
	// }
	
</style>