uniapp实现中间平滑凸起tabbar

背景
实现思路
代码实现
尾巴

背景

在移动端开发中，tabar是一个使用频率很高的组件，几乎是每个APP都会用到。今天给大家分享一个中间平滑凸起的tabbar组件，有需要的可以做下参考。先上图镇楼：

实现思路

看上面图片就知道这个难点只有一个，就是中间那个平滑的凸起tab怎么来实现。好了，我也不卖关子了，直接说下实现的思路：

1、先布局一个普通的tabbar

2、再利用clip-path来裁剪出一个平滑凸起的圆弧，通过设置position来盖在步骤1的普通tabbar上面。

代码实现

我们先布局出一个普通的tabbar并放置在屏幕底部。

javascript 复制代码

/*省略部分代码*/
<view class="tabbar">
			<block v-for="(item, index) in tabbarList" :key="index">
				<view class="tabbar-item" @click="toIndex(index)">
					<image :src="current == index ? item.activeIcon : item.inactiveIcon"></image>
					<text :class="'font-title' + (current == index ? '-active' : '')">{{item.title}}</text>
				</view>
			</block>
		</view>
/*省略部分代码*/

tabbarList就是你存放的tabbar配置项为奇数个，格式如下：

javascript 复制代码

/*省略部分代码*/
tabbarList: [{
					inactiveIcon: '../../static/tabbar/main_tab_home_normal.png',
					activeIcon: '../../static/tabbar/main_tab_home_select.png',
					title: '首页'
			}]
/*省略部分代码*/

这是效果如下：

接下来我们利用clip-path来裁剪出一个弧形的path，然后在tabbar中间盖一个你需要的图片，我这里是加号图。为了看的更直观，我将这个裁剪的弧形先不盖在tabbar上面，先偏移底部较大一段距离，看效果：

然后调整下偏移量到一个合适位置，就看到了文章中开始那个效果了。这个path的裁剪形状你可以直接参考我的。

javascript 复制代码

/*省略部分代码*/
.mid-btn-arc {
        position: fixed;
        bottom: 250rpx;
        left: calc(50% - 100rpx);
        background-color: #fff;
        z-index: 98;
        height: 100rpx;
        width: 200rpx;
        clip-path: path('M 50,0 Q 35,0 25,7.5 Q 20.5, 11.5 0, 15 V 50 H 100 V15 Q 79.5,11.5 75,7.5 Q 65,0 50,0 z');
    }
/*省略部分代码*/

到这里基本就完工了。接下来贴出来全部的代码：

javascript 复制代码

<template>
	<view>
		<view>{{content}}</view>
		<view class="tabbar">
			<block v-for="(item, index) in tabbarList" :key="index">
				<view class="tabbar-item" @click="toIndex(index)">
					<image :src="current == index ? item.activeIcon : item.inactiveIcon"></image>
					<text :class="'font-title' + (current == index ? '-active' : '')">{{item.title}}</text>
				</view>
			</block>
			<view class="mid-btn-arc"></view>
			<view class="mid-btn" @click="toIndex(tabbarList.length % 2)">
				<image class="mid-img" src="../../static/tabbar/add.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				content: '首页',
				tabbarList: [{
					inactiveIcon: '../../static/tabbar/main_tab_home_normal.png',
					activeIcon: '../../static/tabbar/main_tab_home_select.png',
					title: '首页'
				},
				{
					inactiveIcon: '../../static/tabbar/main_tab_home_normal.png',
					activeIcon: '../../static/tabbar/main_tab_home_select.png',
					title: '首页1'
				},
				{
					inactiveIcon: '../../static/tabbar/main_tab_home_normal.png',
					activeIcon: '../../static/tabbar/main_tab_home_select.png',
					title: '首页2'
				},
				{
					inactiveIcon: '../../static/tabbar/main_tab_home_normal.png',
					activeIcon: '../../static/tabbar/main_tab_home_select.png',
					title: '首页3'
				},
				{
					inactiveIcon: '../../static/tabbar/main_tab_home_normal.png',
					activeIcon: '../../static/tabbar/main_tab_home_select.png',
					title: '首页4'
				}]
			}
		},
		methods: {
			toIndex(index){
				this.current = index
				this.content = this.tabbarList[index].title
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #dfdfdf;
	}
    .tabbar {
        position: fixed;
        left: 0;
        bottom: 0;
        height: 120rpx;
        width: 100vw;
        background-color: #f9f9f9;
        z-index: 99;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
 
    .tabbar-item {
        flex: 1;
        height: 120rpx;
        background-color: #fff;
        z-index: 100;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: transform 0.3s;
    }
 
    .font-title {
        font-size: 22rpx;
        margin: 5rpx 0;
        color: #dfdfdf;
        z-index: 100;
    }
 
    .font-title-active {
        font-size: 22rpx;
        margin: 5rpx 0;
        color: #000000;
        z-index: 100;
    }
 
    .mid-btn-arc {
        position: fixed;
        bottom: 50rpx;
        left: calc(50% - 100rpx);
        background-color: #fff;
        z-index: 98;
        height: 100rpx;
        width: 200rpx;
        clip-path: path('M 50,0 Q 35,0 25,7.5 Q 20.5, 11.5 0, 15 V 50 H 100 V15 Q 79.5,11.5 75,7.5 Q 65,0 50,0 z');
    }
 
    .mid-btn {
        position: fixed;
        height: 100rpx;
        width: 100rpx;
        left: 50%;
        bottom: 45rpx;
        transform: translateX(-50rpx);
        background-color: #fff;
        border-radius: 50rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 100;
 
        .mid-img {
            width: 80rpx;
            height: 80rpx;
        }
    }
 
    image {
        width: 50rpx;
        height: 50rpx;
        transition: transform 0.3s, width 0.3s, height 0.3s;
    }
</style>

我知道你只想直接ctrl+c

啊什么，你还想要图片？给你，通通给你：

尾巴

毫无保留啥都给你们了，有啥问题可以给我留言，如果喜欢我的文章，欢迎给我点赞，评论，关注，谢谢大家！