samehome/components/tabBar/tabBar.vue

<template>
	<view class="index-header">
		<view class="con">
			<view class="tabbar_item" @click="goToPage(1)">
				<view class="uni-tabbar_bd">
					<view class="uni-tabbar_icon">
						<image :src="`/static/tabBar/${selectActive == 1 ? 'ic_home_pr' : 'ic_home_de'}.png`"
							mode="aspectFit" class="img1"></image>
					</view>
					<view class="uni-tabbar_label" :class="['text', selectActive == 1 ? 'active' : '']">
						{{ i18n.Home }}
					</view>
				</view>
			</view>
			<view class="tabbar_item" @click="goToPage(2)">
				<view class="uni-tabbar_bd">
					<view class="uni-tabbar_icon">
						<image :src="`/static/tabBar/${selectActive == 2 ? 'ic_chart_pr' : 'ic_chart_de'}.png`"
							mode="aspectFit" class="img1"></image>
					</view>
					<view class="uni-tabbar_label" :class="['text', selectActive == 2 ? 'active' : '']">
						{{ i18n.Markets }}
					</view>
				</view>
			</view>
			<view class="tabbar_item" @click="goToPage(3)">
				<view class="uni-tabbar_bd">
					<view class="uni-tabbar_icon">
						<image :src="`/static/tabBar/${selectActive == 3 ? 'ic_charity_pr' : 'ic_charity_de'}.png`"
							mode="aspectFit" class="img1"></image>
					</view>
					<view class="uni-tabbar_label" :class="['text', selectActive == 3 ? 'active' : '']">
						{{ i18n.Charity }}
					</view>
				</view>
			</view>
			<view class="tabbar_item" @click="goToPage(4)">
				<view class="uni-tabbar_bd">
					<view class="uni-tabbar_icon">
						<image :src="`/static/tabBar/${selectActive == 4 ? 'ic_subscription_pr' : 'ic_subscription_de'}.png`"
							mode="aspectFit" class="img1"></image>
					</view>
					<view class="uni-tabbar_label" :class="['text', selectActive == 4 ? 'active' : '']">
						{{ i18n.Subscription }}
					</view>
				</view>
			</view>
			<view class="tabbar_item" @click="goToPage(5)">
				<view class="uni-tabbar_bd">
					<view class="uni-tabbar_icon">
						<image :src="`/static/tabBar/${selectActive == 5 ? 'ic_me_pr' : 'ic_me_de'}.png`"
							mode="aspectFit" class="img1"></image>
					</view>
					<view class="uni-tabbar_label" :class="['text', selectActive == 5 ? 'active' : '']">
						{{ i18n.Me }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>

const COMPONENT_NAME = 'tabBar'
export default {
	name: COMPONENT_NAME,



	props: {
		selectActive: {
			type: Number,
			default() {
				return 1
			}
		},
	},
	data() {
		return {
			status: '',
			address: '',
		}
	},
	computed: {

	},
	mounted() {
	},
	methods: {

		goToPage(num) {
			let url = '/pages/index/index';
			switch (+num) {
				case 1:
					url = '/pages/index/index';
					break;
				case 2:
					url = '/pages/markets/index';
					break;
				case 3:
					url = '/pages/charity/index';
					break;
				case 4:
					url = '/pages/subscription/index';
					break;
				case 5:
					url = '/pages/me/index';
					break;

				default:
					break;
			}
			uni.reLaunch({
				url,
			})

		}

	},
	computed: {
		i18n() {
			return this.$t('tabBar')
		},
	}
}
</script>


<style scoped lang="scss">
.active {
	color: $mainColor  !important;
}

.uni-tabbar_label {
	color: #A1A0A8;
	font-size: 10px;
	line-height: normal;
	margin-top: 3px;
	position: relative;
	text-align: center;
	font-size: 24rpx !important;

}

.uni-tabbar_icon {
	width: 48rpx !important;
	height: 48rpx !important;
	position: relative;
	display: inline-block;
	margin-top: 5px;
}

.uni-tabbar_icon image {
	width: 100%;
	height: 100%;
}

.uni-tabbar_bd {
	height: 100rpx;
	position: relative;
	-webkit-flex-direction: column;
	flex-direction: column;
	cursor: pointer;
}

.index-header {
	z-index: 8;
}


.con {
	width: 100%;
	height: 166rpx;
	background-color: #323045;
	position: fixed;
	bottom: 0;
	left: 0;
	padding-top: 22rpx;
	display: flex;
	z-index: 8;
	box-sizing: border-box;

	&::after {
		display: block;
		position: absolute;
		content: '';
		background: #fff;
		width: 268rpx;
		height: 10rpx;
		border-radius: 10rpx;
		top: 140rpx;
		left: 242rpx;
	}
}

.tabbar_item {
	display: -webkit-box;
	width: 150rpx;
	height: 100rpx;
	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;
	webkit-flex-direction: column;
	flex-direction: column;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	flex: 1;
	font-size: 0;
	text-align: center;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</style>