uniapp实现tabbar凸起

uniapp是一种跨平台的开发框架，它结合了vue.js和微信小程序的优点，并可在多个平台上运行。实现tabbar凸起的方法有很多种，下面是一种常用的做法：

1. 在`uni-tabbar`组件上添加一个`custom`属性，并将其设为`true` 。

<uni-tabbar custom="true">

2. 在`uni-tabbar`组件内部添加一个`uni-icons`图标组件，并设置其属性使它放在tabbar中间。

<uni-tabbar custom="true">
  <uni-tabbar-item iconPath="static/tabbar/icon1.png" selectedIconPath="static/tabbar/icon1-active.png" text="Tab 1"></uni-tabbar-item>
  <uni-tabbar-item iconPath="static/tabbar/icon2.png" selectedIconPath="static/tabbar/icon2-active.png" text="Tab 2"></uni-tabbar-item>
  <uni-icons type="add" size="40" color="#ffffff" style="position: absolute; top: -30px; left: calc(50% - 20px);"></uni-icons>
  <uni-tabbar-item iconPath="static/tabbar/icon3.png" selectedIconPath="static/tabbar/icon3-active.png" text="Tab 3"></uni-tabbar-item>
  <uni-tabbar-item iconPath="static/tabbar/icon4.png" selectedIconPath="static/tabbar/icon4-active.png" text="Tab 4"></uni-tabbar-item>
</uni-tabbar>

3. 通过CSS样式将`uni-icons`组件移到tabbar顶部，并使其大小适合tabbar的大小。

.uni-tabbar.uni-tabbar-custom {
  padding-bottom: 120rpx;
  position: relative;
}

.uni-icons {
  width: 80rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #007aff;
  z-index: 999;
  border-radius: 40rpx;
  box-shadow: 0 1rpx 1rpx rgba(0, 0, 0, 0.1);
}

这是一种简单的实现方法，可以适用于大多数情况。如果需要进一步优化，可以使用更高级的技术，如自定义组件、自定义样式等等来实现。无论哪种方式，都可以根据项目的需求自由选择。