最近要开发一个微信小程序,然后看到了别的小程序的tabbar长这个样子👇
然后我就也想做这样凹陷的的tabbar (其实是领导叫的) ,那他这个凹陷的效果是怎么实现的呢,网上搜了很多也没找到实现的思路,后面自己研究后实现了,分享思路出来给需要的朋友。
我最后自己实现出来的效果是这样的👇
思路一:用 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;
}
}
两边的块级元素我们把对应的顶部给个圆角,然后效果就是这样👇
中间的也是块级元素,设定了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;
修改后效果是这样👇
再修改圆的阴影偏移
修改第二个参数,让阴影往下偏移
box-shadow: 0 100px 0 100px #ffffff;
修改为100px的时候我们看到效果是这样的👇
看到这里我估计你们应该懂了吧,最后我再修改偏移量为156px, 最后实现了,当然你们也许需要自己调节,毕竟宽高什么的跟我的不一样。大功告成👇
完整代码👇
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,我这里不需要。
以上就是我的分享,希望能帮助到大家😀。