uniapp实现中间平滑凸起tabbar_uniapp tabbar 中间凸起

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>

我知道你只想直接ctrl+c

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

尾巴

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