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

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

尾巴

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

原文地址：https://blog.csdn.net/abs625/article/details/143364414

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！