自定义tabBar

1、在components文件下新建tabber.vue

<template>
	<view class="tabbar-container">
		<block>
			<!-- 针对中间的导航栏  通过true来判断控制类名和样式 -->
			<view class="tabbar-item" v-for="(item, index) in tabbarList"
				:class="[item.centerItem ? 'center-item' : '']" @click="changeItem(item)" :key="index">
				<view class="item-top">
					<image :src="currentItem == item.id ? item.selectIcon : item.icon"></image>
				</view>
				<!-- 通过三元判断控制类名 达到控制选中和未选中的样式 -->
				<view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
					<text>{{ item.text }}</text>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	// 组件的书写符合easycom规范 无需引入直接使用
	export default {
		props: {
			currentPage: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				currentItem: 0,
				tabbarList: [{
						id: 0,
						path: '/pages/index/index',
						icon: '/static/index.png',
						selectIcon: '/static/index-onLine.png',
						text: '首页',
						centerItem: false
					},
					{
						id: 1,
						path: '/pages/pages/index/index',
						icon: '/static/scan.png',
						selectIcon: '/static/scan.png',
						text: '扫一扫',
						// 通过类名class控制样式大小
						centerItem: true
					},
					{
						id: 2,
						path: '/pages/my/my',
						icon: '/static/my.png',
						selectIcon: '/static/my-onLine.png',
						text: '我的',
						centerItem: false
					}
				],
			}
		},
		mounted() {
			this.currentItem = this.currentPage
		},
		methods: {
			changeItem(item) {
					uni.switchTab({
						url: item.path
					})
			},
		},


	};
</script>
<style lang="less" scope>
	view {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	.tabbar-container {
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		width: 100%;
		height: 110rpx;
		box-shadow: 0 0 16rpx #cfcfcf;
		display: flex;
		align-items: center;
		padding: 5rpx 0;
		color: #999999;
		background-color: #fff;

		/* 针对tabbar的统一处理 */
		.tabbar-item {
			width: 33.33%;
			height: 100rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;

			.item-top {
				width: 48rpx;
				height: 48rpx;
				padding-bottom: 2rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			// 未被选中的导航栏字体
			.item-bottom {
				font-size: 28rpx;
				width: 100%;
			}

			// 被选中的导航栏字体
			.item-active {
				color: #3c73f2;
			}
		}

		// 最中间的tabbar导航栏
		.center-item {
			display: block;
			position: relative;

			.item-top {
				flex-shrink: 0;
				width: 100rpx;
				height: 100rpx;
				position: absolute;
				padding: 20rpx;
				top: -50rpx;
				left: calc(50% - 50rpx);
				border-radius: 50%;
				box-shadow: 0 0 5px #999;
				background-image: linear-gradient(to right, #5888F8, #193EF4);
			}

			.item-bottom {
				position: absolute;
				bottom: 5rpx;
			}

			.item-active {
				position: absolute;
				bottom: 5rpx;
				color: #3c73f2;
			}
		}
	}
</style>

2、页面使用

<template>
  <view>
    	<!-- 0为第一个页面，1为第二个，2为第三个 -->
  		<tabBar :current-page="2"></tabBar>
  </view>
</template>
<script>
  import tabBar from '../../components/tabBar.vue';
  export default {
      components: {
        tabBar
      },
  }
</script>

3、效果图