diagnosis_app/components/TabBar/index.vue

<template>
	<view class="tarbar">
		<view class=".tarbar-list" :style="{
					'border-top': tabBar.position == 'bottom' ? '1rpx solid ' + tabBar.borderStyle : 0,
					'border-bottom': tabBar.position == 'top' ? '1rpx solid ' + tabBar.borderStyle : 0,		
	                background: tabBar.backgroundColor,
	                color: tabBar.color
	            }">
			<view class="tarbar-list-ul">
				<view class="tarbar-list-li" v-for="(item, index) in list" :key="index" @click.stop="setSelected(index)">
					<block>
						<view class="tarbar-list-li-icon">
							<image :src="selected == index ? item.selectedIconPath : item.iconPath"></image>
						</view>
						<view :style='selected == index?"color:"+tabBar.selectedColor:""' class="tarbar-list-li-name">{{ item.text }}</view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabBar: {
					"color":"#99999",
					"selectedColor":"#3384ff",	
					"borderStyle": "white",
					"backgroundColor": "#ffffff",				
					"position": 'bottom'
				},
				selected: this.current //当前激活项
			};
		},
		props: {
			current: { 
				type: [Number, String],
				default: 0
			},
			list:{
				type:[Array],
				default:()=>[]
			}		
		},
		watch:{
			current(index){
				if (this.selected == index) return
				this.selected=index;
				let title=this.list[index].text;
				uni.setNavigationBarTitle({
					title
				})							
			}
		},
		methods: {
			setSelected(index) {
				this.$emit('change', index)
			},
		}
	}
</script>

<style>
	.tarbar {
		width: 100%;
		z-index: 9999;
		position: fixed;
		bottom: 0;
		background-color: #fff;
	}

	.tarbar-list {
		width: 100%;
		height: 98upx;
		background: #4d586f;
		position: fixed;
		left: 0;
		bottom: 0;
	}

	.tarbar-list-ul {
		width: 100%;
		height: 100%;
		padding: 0upx 60upx;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.tarbar-list-li {
		width: 80upx;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.tarbar-list-li-icon {
		width: 50upx;
		height: 50upx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.tarbar-list-li-icon image {
		width: 50rpx;
		height: 50rpx;
	}

	.tarbar-list-li-name {
		width: 100%;
		text-align: center;
		line-height: 30upx;
		font-size: 24upx;
		height: 30upx;
		padding: 12upx 0 2upx 0;
	}

	.tarbar-list-li-center {
		width: 100upx;
	}
</style>