XLJK-web/xinlijiankang-uniapp-main/components/tabBar/tabBar.vue

<template>
	<view class="uni-tabbar">
		<view v-for="(item, index) in list" :key="index" @click="onTabBarClick(item.current)"
			:class="['uni-tabbar-item', { 'uni-tabbar-item-active': index === activeIndex }]">
			<view class="uni-tabbar-item-icon">
				<img :src="index === activeIndex ? item.selectedIconPath : item.iconPath" />
			</view>
			<view class="uni-tabbar-item-text">{{ item.text }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tabBar",
		props:{
			activeIndex: Number, // 下标
		},
		data() {
			return {
				list: [{
					current: 0,
					"pagePath": "/pages/index/index",
					"text": "首页",
					"iconPath": "/static/dibu/boa1.png",
					"selectedIconPath": "/static/dibu/bob1.png"
				},
				{
					current: 1,
					"pagePath": "/pages/lecturer/wdzx",
					"text": "咨询",
					"iconPath": "/static/dibu/boa2.png",
					"selectedIconPath": "/static/dibu/bob2.png"
				},
				{
					current: 2,
					"pagePath": "/pages/index/jiehuo",
					"text": "解惑",
					"iconPath": "/static/dibu/boa3.png",
					"selectedIconPath": "/static/dibu/bob3.png"
				},
				{
					current: 3,
					"pagePath": "/pages/lecturer/my",
					"text": "我的",
					"iconPath": "/static/dibu/boa4.png",
					"selectedIconPath": "/static/dibu/bob4.png"
				}]
			};
		},
		methods:{
			onTabBarClick(i){
				this.$emit("change", i);
				if(this.activeIndex != i){
					uni.switchTab({
						url: this.list[i].pagePath
					})
				}
				
			}
		}
	}
</script>

<style lang="less">
/* 修改图标的大小和位置 */
.uni-tabbar-item-icon {
	position: relative;
	img {
		width: 48rpx; //图标宽度
		height: 48rpx; //图标高度
	}
}
/* 修改文字大小和颜色 */
.uni-tabbar-item-text {
  font-size: 12px; //文字大小
  color: #999; //文字颜色
}
.uni-tabbar-item-active .uni-tabbar-item-text {
  color: #374B6E; //选中状态下文字颜色
}
// 添加背景色和阴影
.uni-tabbar {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  width: 100%;
  height: 100rpx; //tabbar高度
  background-color: #fff; //背景色
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1); //阴影
  z-index: 100;
}
.uni-tabbar-item  {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
</style>