当前位置：首页 > news >正文

uniapp实现中间平滑凸起tabbar

news 2025/7/1 9:59:56

uniapp实现中间平滑凸起tabbar

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

背景

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

实现思路

看上面图片就知道这个难点只有一个，就是中间那个平滑的凸起tab怎么来实现。好了，我也不卖关子了，直接说下实现的思路：
1、先布局一个普通的tabbar
2、再利用clip-path来裁剪出一个平滑凸起的圆弧，通过设置position来盖在步骤1的普通tabbar上面。

代码实现

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

/*省略部分代码*/
<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配置项为奇数个，格式如下：

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

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

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

/*省略部分代码*/
.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');}
/*省略部分代码*/

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

<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 = indexthis.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>