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
啊什么，你还想要图片？给你，通通给你：
尾巴
毫无保留啥都给你们了，有啥问题可以给我留言，如果喜欢我的文章，欢迎给我点赞，评论，关注，谢谢大家！
