移动端h5丶小程序自定义凹陷tabbar中间悬浮按钮思路分享

2021年08月02日 19:14 · 阅读 727

最近要开发一个微信小程序，然后看到了别的小程序的tabbar长这个样子👇

1627896129(1).jpg

然后我就也想做这样凹陷的的tabbar (其实是领导叫的) ，那他这个凹陷的效果是怎么实现的呢，网上搜了很多也没找到实现的思路，后面自己研究后实现了，分享思路出来给需要的朋友。

我最后自己实现出来的效果是这样的👇

1627899416(1).jpg

思路一：用 png 图片实现

很简单，叫你们的UI设计师给你画一个类似这种的png图片👇

一定要png，凹陷的地方一定要透明。

然后其他的就自己布局就好啦

思路二：用css的阴影属性来实现

就这样说的话可能有些朋友不太明白，所以我将用代码写出来👇

首先看一下html和css代码结构

<view class="u-flex custom-tabbar">
    <view class="u-flex-1 h100 bg-white left-tabbar-wrapper"></view>
        <view class="h100 transparent-circle-wrapper">
            <view class="transparent-circle"></view>
        </view>
    <view class="u-flex-1 h100 bg-white right-tabbar-wrapper"></view>
</view>
复制代码

自定义css

.bg-white{
    background-color: #FFFFFF;
}
.u-flex-1{
    flex: 1;
}
.h100{
    height: 100%;
}
.u-flex{
    display: flex;
    align-items: center;
}
复制代码

这里的view你可以当作是html的div，小程序里面的是view，这里用了几个自定义的className。

根据html结构我们可以看到我们是分成三个view来实现的，父级flex布局把他们排成一列，然后中间是一个透明的圆，两边就是白色背景的块级元素

那么重要的css来了，先固定在底部先 ( 我这里用的是 scss )

.custom-tabbar {
    height: 50px;
    position: fixed;
    bottom: 0;
    width: 100%;
    .left-tabbar-wrapper {
	border-top-right-radius: 21px;
	}
    .right-tabbar-wrapper {
        border-top-left-radius: 21px;
    }
 }
复制代码

两边的块级元素我们把对应的顶部给个圆角，然后效果就是这样👇

1627899708(1).jpg

中间的也是块级元素，设定了100px的宽度，并没有给背景颜色，所以中间是透明的

给中间的那个view设置相对定位，圆设置绝对定位，经典的子绝父相

.transparent-circle-wrapper {
    position: relative;
    width: 100px;
    .transparent-circle {
        position: absolute;
        left: -3px;
        top: -50px;
        width: 106px;
        height: 100px;
        border-radius: 50%;
    }
}
复制代码

这里透明的圆top:-50px是为了悬浮，相信大家都能明白，其他的我就不过多阐述了，下面看核心实现的css属性

给圆设置一个白色阴影，把阴影扩大

修改第三个参数，比如我这里设置100px

box-shadow: 0 0 0 100px #ffffff;
复制代码

修改后效果是这样👇

1627900846(1).jpg

再修改圆的阴影偏移

修改第二个参数，让阴影往下偏移

box-shadow: 0 100px 0 100px #ffffff;
复制代码

修改为100px的时候我们看到效果是这样的👇

1627901087(1).jpg

看到这里我估计你们应该懂了吧，最后我再修改偏移量为156px, 最后实现了，当然你们也许需要自己调节，毕竟宽高什么的跟我的不一样。大功告成👇

1627899416(1).jpg

完整代码👇

html

<view class="u-flex custom-tabbar">
    <view class="u-flex-1 h100 bg-white left-tabbar-wrapper"></view>
        <view class="h100 transparent-circle-wrapper">
            <view class="transparent-circle"></view>
        </view>
    <view class="u-flex-1 h100 bg-white right-tabbar-wrapper"></view>
</view>
复制代码

css

.bg-white{
    background-color: #FFFFFF;
}
.u-flex-1{
    flex: 1;
}
.h100{
    height: 100%;
}
.u-flex{
    display: flex;
    align-items: center;
}
.custom-tabbar {
    height: 50px;
    position: fixed;
    bottom: 0;
    width: 100%;
    .left-tabbar-wrapper {
        border-top-right-radius: 21px;
    }
    .right-tabbar-wrapper {
        border-top-left-radius: 21px;
    }
    .transparent-circle-wrapper {
        position: relative;
        width: 100px;
        .transparent-circle {
            position: absolute;
            left: -3px;
            top: -50px;
            width: 106px;
            height: 100px;
            border-radius: 50%;
            box-shadow: 0 156px 0 100px #ffffff;
        }
    }
}

复制代码

总结

这里两种思路都可以实现，第二种的话需要自行调节阴影编译、圆的宽高、left、top值等，来达到想要的效果，当然如果阴影超出外面了可以在父级给个overflow:hidden，我这里不需要。

以上就是我的分享，希望能帮助到大家😀。