【无标题】uniapp 自定义tabbar实现图标凸起

一、新建页面，自定义一个组件

<!-- 自定义底部导航栏 -->
<template>
	<view class="container">
		<view class="tabbar-item" :class="[item.centerItem ? ' center-item' : '']"
			:style="'width: calc(100% /' + tabbarList.length + ')'" @click="changeItem(item)"
			v-for="(item, i) in tabbarList" :key="i">
			<view class="item-top">
				<image :src="curItem === item.id ? item.selectedIconPath : item.iconPath" />
			</view>
			<view class="item-bottom" :class="[curItem === item.id ? 'item-active' : '']">{{ item.text }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/* 当前导航栏 */
			currPage: {
				type: Number,
			}
		},
		data() {
			return {
				curItem: 1, // 当前所选导航栏
				// 导航栏列表
				tabbarList: [{
						id: 1,
						pagePath: "/pages/tabBar/index",
						iconPath: "/static/images/tabbar/home.png",
						selectedIconPath: "/static/images/tabbar/home-active.png",
						text: "首页",
						centerItem: false
					},
					{
						id: 2,
						pagePath: "",
						iconPath: "/static/images/tabbar/robot.png",
						selectedIconPath: "/static/images/tabbar/robot.png",
						text: "",
						centerItem: true
					},
					{
						id: 3,
						pagePath: "/pages/tabBar/my",
						iconPath: "/static/images/tabbar/my.png",
						selectedIconPath: "/static/images/tabbar/my-active.png",
						text: "我的",
						centerItem: false
					}
				]
			};
		},
		mounted() {
			this.curItem = this.currPage; // 当前所选导航栏
			// #ifdef H5
			uni.hideTabBar(); // 隐藏 tabBar 导航栏
			// #endif

		},
		methods: {
			/* 导航栏切换 */
			changeItem(e) {
				// 中间凸起按钮
				if (e.id === 2) {
					return;
				}
				this.$tab.reLaunch(e.pagePath)
			}
		}
	};
</script>

<style lang="scss" scoped>
	$textDefaultColor: #9398A6; // 文字默认颜色
	$bottomBg: #ffffff; // 底部背景
	$textSelectedColor: #4576F0; // 文字选中颜色
	$centerItemBg: #ffffff; // 中间凸起按钮背景

	.container {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		width: 100%;
		height: 110rpx;
		color: $textDefaultColor;
		padding: 5rpx 0;
		background-color: $bottomBg;
		box-shadow: 0 0 10rpx #999;
	}

	.tabbar-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		height: 100rpx;

		.item-top {
			flex-shrink: 0;
			width: 65rpx;
			height: 65rpx;
			padding: 4rpx;

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

		.item-bottom {
			width: 100%;
			font-size: 28rpx;
		}

		.item-active {
			color: $textSelectedColor;
		}
	}

	.center-item {
		position: relative;

		.item-top {
			position: absolute;
			top: -55rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 110rpx;
			height: 110rpx;
			background-color: $centerItemBg;
			border-radius: 50%;
		}

		.item-bottom {
			position: absolute;
			bottom: 5rpx;
		}
	}
</style>

二、在main.js文件里面引入

//tabBar组件
import tabBar from 'components/tabbar/tabbar.vue'
Vue.component('tabBar', tabBar)

三、在pages.json的tabBar里面开启自定义

"custom": true, // 开启自定义tabBar(不填每次原来的tabbar在重新加载时都回闪现)

"tabBar": {
		"color": "#9398A6",
		"selectedColor": "#4576F0",
		"borderStyle": "white",
		"backgroundColor": "#ffffff",
		"custom": true, // 开启自定义tabBar(不填每次原来的tabbar在重新加载时都回闪现)
		"list": [{
				"pagePath": "pages/tabBar/index",
				"iconPath": "static/images/tabbar/home.png",
				"selectedIconPath": "static/images/tabbar/home-active.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/mine/index",
				"iconPath": "static/images/tabbar/my.png",
				"selectedIconPath": "static/images/tabbar/my-active.png",
				"text": "我的"
			}
		]
	},