teaching-uniapp/components/tabBar/tabBar.vue

<template>
	<view class="tabBar">
		<uv-tabbar :value="value" @change="gotoBar">
				<uv-tabbar-item class="txt" text="首页">
					<template v-slot:active-icon>
						<image class="icon" style="width: 36rpx;height: 36rpx;" src="../../static/tabbar/Fill 2.png"></image>
					</template>
					<template v-slot:inactive-icon>
						<image class="icon" style="width: 36rpx;height: 36rpx;" src="../../static/tabbar/Fill 1.png"></image>
					</template>
				</uv-tabbar-item>
				
				<uv-tabbar-item text="资源库">
					<template v-slot:active-icon>
						<image class="icon" style="width: 40rpx;height: 32rpx;" src="/static/tabbar/zyk2.png"></image>
					</template>
					
					<template v-slot:inactive-icon>
						<image class="icon" style="width: 40rpx;height: 32rpx;" src="/static/tabbar/zyk.png"></image>
					</template>
				</uv-tabbar-item>
				
				<uv-tabbar-item text="活动">
					<template v-slot:active-icon>
						<image class="icon" style="width: 40rpx;height: 40rpx;" src="/static/tabbar/hd2.png"></image>
					</template>
					
					<template v-slot:inactive-icon>
						<image class="icon" style="width: 40rpx;height: 40rpx;" src="/static/tabbar/hd.png"></image>
					</template>
				</uv-tabbar-item>
				
				<uv-tabbar-item text="消息">
					<template v-slot:active-icon>
						<image class="icon" style="width: 38rpx;height: 34rpx;" src="/static/tabbar/xx2.png"></image>
					</template>
					<template v-slot:inactive-icon>
						<image class="icon" style="width: 38rpx;height: 34rpx;" src="/static/tabbar/xx.png"></image>
					</template>
				</uv-tabbar-item>
				
				<uv-tabbar-item text="我的">
					<template v-slot:active-icon>
						<image class="icon" style="width: 34rpx;height: 38rpx;" src="/static/tabbar/wd2.png"></image>
					</template>
					<template v-slot:inactive-icon>
						<image class="icon" style="width: 34rpx;height: 38rpx;" src="/static/tabbar/wd.png"></image>
					</template>
				</uv-tabbar-item>
			</uv-tabbar>
	</view>
</template>

<script>
	export default {
		name:"tabBar",
		data() {
			return {
				value: 0
			};
		},
		methods:{
			gotoBar(e){
				// this.value=index
				console.log(e);
				switch(e){
					case 0:
						uni.switchTab({
							url:'/pages/index/index'
						})
						break;
					case 1:
						uni.switchTab({
							url:'/pages/resource/resource'
						})
						break;
					case 2:
						uni.switchTab({
							url:'/pages/activityPage/activityPage'
						})
						break;
					case 3:
						uni.switchTab({
							url:'/pages/message/message'
						})
						break;
					default:
						uni.switchTab({
							url:'/pages/mine/mine'
						})
						break;
				}
			}
		}
	}
</script>

<style lang="scss">
	.tabBar{
		// position: fixed;
		.icon {
				width: 36rpx;
				height: 36rpx;
		}
		/deep/ .uni-tabbar__label{
			 font-size: 100rpx !important;
			 font-weight: 400;
			 line-height: 24rpx;
			 
		 }
		
	}
</style>