gas-station-ticket-uniapp-240822/components/base/tabbar.vue

<template>
	<view class="tabbar">
		<view
		 :class="{item : true, active : select == index}"
		 v-for="(item, index) in list"
		 @click="toPath(item, index)">
			<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>

<script>
	export default {
		name:"tabbar",
		props : ['select'],
		data() {
			return {
				list : [
					{
						"selectedIconPath": "/static/image/tabbar/home-a.png",
						"iconPath": "/static/image/tabbar/home.png",
						"pagePath": "/pages/index/index",
						"title": "tabbar.title.1"
					},{
						"selectedIconPath": "/static/image/tabbar/addressBook-a.png",
						"iconPath": "/static/image/tabbar/addressBook.png",
						"pagePath": "/pages/index/addressBook",
						"title": "tabbar.title.2"
					},{
						"selectedIconPath": "/static/image/tabbar/discover-a.png",
						"iconPath": "/static/image/tabbar/discover.png",
						"pagePath": "/pages/index/discover",
						"title": "tabbar.title.3"
					},{
						"selectedIconPath": "/static/image/tabbar/center-a.png",
						"iconPath": "/static/image/tabbar/center.png",
						"pagePath": "/pages/index/center",
						"title": "tabbar.title.3"
					}
				]
			};
		},
		methods : {
			toPath(item, index){
				if(index == this.select){
					return
				}
				uni.redirectTo({
					url: item.pagePath
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.tabbar{
	position: fixed;
	width: 750rpx;
	background-color: #f7f7f7;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	height: 120rpx;
	z-index: 999999;
	bottom: 0;
	left: 0;
	line-height: 50rpx;
	color: #333;
	.item{
		width: 25%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.icon{
			width: 54rpx;
			height: 54rpx;
			.icon-image{
				width: 54rpx;
				height: 54rpx;
			}
		}
		.title{
			overflow: hidden;
			// white-space: nowrap;
			// text-overflow: ellipsis;
			// -o-text-overflow: ellipsis;
			font-size: 23rpx;
		}
	}
}
.active{
	color: #03c061 !important;
}
</style>