uni-app如果自定义tabbar实现底部样式有凸起效果，背景带圆角

 想要实现的效果、

大部分可以参考这一篇文章

小程序弹出框是没办法遮挡住底部的tabbar的，解决的办法是使用自定义tabbar。。uni-app小程序如何自定义tabbar-CSDN博客

我们只要改下index.wxml和index. wxs的代码就行了

<view class="tab-bar"><block wx:for="{{list}}" wx:key="index"><view class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab"><view class="special-image" wx:if="{{selected === index}}"><image class="special-image-pic" mode="aspectFit" src="{{item.selectedIconPath}}" mode="aspectFit"></image></view><image class="item-image" mode="aspectFit" src="{{item.iconPath}}" mode="aspectFit" wx:else></image><view class="tab-text" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view></view></block>
</view>

.tab-bar {position: fixed;bottom: 0;left: 0;right: 0;height: 96rpx;background: white;display: flex;padding-bottom: env(safe-area-inset-bottom);border-radius:32rpx 32rpx 0 0;padding-top:22rpx;
}.tab-bar-border {background-color: rgba(0, 0, 0, 0.33);position: absolute;left: 0;top: 0;width: 100%;height: 2rpx;transform: scaleY(0.5);
}.tab-bar-item {flex: 1;text-align: center;display: flex;justify-content: center;align-items: center;flex-direction: column;position:relative;
}.tab-bar-item .item-image {width: 46rpx;height: 46rpx;position: absolute;top: 0;
}
.tab-bar-item .special-image {position: absolute;top: -50rpx;left: 35rpx;width: 150rpx;height: 150rpx;text-align: center;box-sizing: border-box;
}
.tab-bar-item .special-image .special-image-pic {width: 100%;height: 100%;
}.tab-bar-item .tab-text {margin-top: 4rpx;
}.tab-bar-item .special-text {margin-top: 44rpx
}.tab-bar-item .tab-text {font-size: 28rpx;position:absolute;bottom:0;
}