uav-uniapp-demo-24-8-18/components/base/tabBar.vue

<template>
	<view class="list">
		<view
		 :class="{item : true, active : select == index}"
		 @click="toPath(item, index)"
		 v-for="(item, index) in list">
			<view class="icon">
				<image :src="select == index ? item.selectedIconPath : item.iconPath" class="icon-image" mode=""></image>
			</view>
			<view class="title">
				{{ $t(item.title) }}
			</view>
		</view>
	</view>
</template>
<!-- "tabBar": {
		"backgroundColor": "white",
		"selectedColor": "#cd0000",
		"list": [
			{
				"selectedIconPath": "/static/tabbar/2.png",
				"iconPath": "/static/tabbar/1.png",
				"pagePath": "pages/home/home",
				"text": "%tabbar.title.1%"
			},{
				"selectedIconPath": "/static/tabbar/4.png",
				"iconPath": "/static/tabbar/3.png",
				"pagePath": "pages/cart/cart",
				"text": "%tabbar.title.2%"
			},{
				"selectedIconPath": "/static/tabbar/6.png",
				"iconPath": "/static/tabbar/5.png",
				"pagePath": "pages/order/order",
				"text": "%tabbar.title.3%"
			}
		]
	} -->
<script>
	export default {
		props : ['select'],
		data() {
			return {
				"list": [
					{
						"selectedIconPath": "/static/tabbar/2.png",
						"iconPath": "/static/tabbar/1.png",
						"pagePath": "/pages/home/home",
						"title": "tabbar.title.1"
					},{
						"selectedIconPath": "/static/tabbar/4.png",
						"iconPath": "/static/tabbar/3.png",
						"pagePath": "/pages/prizeDraw/prizeDraw",
						"title": "tabbar.title.2"
					},{
						"selectedIconPath": "/static/tabbar/6.png",
						"iconPath": "/static/tabbar/5.png",
						"pagePath": "/pages/order/order",
						"title": "tabbar.title.3"
					}
				]
			}
		},
		methods: {
			toPath(item, index){
				if(index == this.select){
					return
				}
				this.$play()
				uni.redirectTo({
					url: item.pagePath
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.list{
	position: fixed;
	width: 100vw;
	// background-color: #aec438;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 120rpx;
	z-index: 999;
	font-size: 20rpx;
	bottom: 0;
	left: 0;
	line-height: 50rpx;
	color: #000;
	box-shadow: 0px 0rpx 10rpx 10rpx #00000022;
	.item:nth-child(2){
		// .icon{
		// 	.icon-image{
		// 		width: 95rpx;
		// 		height: 95rpx;
		// 		margin-top: -55rpx;
		// 	}
		// }
	}
	.item{
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.icon{
			width: 100%;
			height: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			.icon-image{
				width: 40rpx;
				height: 40rpx;
			}
		}
		.icon-image{
			width: 100%;
			height: 50%;
		}
		.title{
			overflow:hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			-o-text-overflow:ellipsis;
		}
	}
}
.active{
	color: #000 !important;
	font-weight: 900;
}
</style>