menduner-uniapp/components/Tabbar/index.vue

<template>
	<view class="myTabbar">
		<view class="tabbar"
			v-for="(item, index) in list"
			:key="index"
			@tap="navigatorTo(index, item.url)"
			style="text-align:center"
		>
			<view class="item">
				<uni-icons  :type="index == activeIndex ? item.activeIconUrl : item.iconUrl" size="26" :color="index == activeIndex ?'#00897B':'#000'" custom-prefix="iconfont"></uni-icons>
			</view>
			<view :class="index == activeIndex ? 'text-active':'text'">{{item.text}}</view>
		</view>
	</view>
</template>

<script setup name="MyTabbar">
import { ref } from 'vue'

const activeIndex = ref(0)
const list = ref([
  {
    activeIconUrl: 'icon-shouye-',
    iconUrl: 'icon-shouye',
    text: '首页',
    url: '/pages/index/index'
  },
  {
    activeIconUrl: 'icon-zhiwei',
    iconUrl: 'icon-zhiweisvg',
    text: '职位',
    url: '/pages/index/position'
  },
  {
    activeIconUrl: 'icon-icon-myself-1',
    iconUrl: 'icon-wode',
    text: '我的',
    url: '/pages/index/my'
  }
])

const navigatorTo = (curIndex, url) => {
	activeIndex.value = curIndex
	uni.reLaunch({
    url
  })
}
</script>

<style lang="scss">
.myTabbar {
	z-index: 999;
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: space-around;
	width: 100%;
	height: 100rpx;
	background-color: #fff;
	border-top: 1px solid #f1f1f1;
 
	.tabbar {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		width: 20%;
		height: 100%;
 
		.item {
			width: 50rpx;
			height: 50rpx;
			text-align: center;
			margin-top: 10rpx;
		}
 
		.text {
			color: #000;
			font-size: 22rpx;
		}
		.text-active{
			color: #00897B;
			font-size: 22rpx;
		}
	}
}
</style>