uniapp中tabbar中间凸起

在uni-app中实现TabBar中间凸起的方法如下：

1. 在 `pages.json` 文件中配置 `custom-tab-bar` 为自定义的 TabBar 组件：

{
  "tabBar": {
    "custom": true,
    "color": "#999",
    "selectedColor": "#007aff",
    "backgroundColor": "#fff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home-active.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "static/tabbar/mine.png",
        "selectedIconPath": "static/tabbar/mine-active.png"
      },
      {
        "pagePath": "pages/release/release",
        "text": "",
        "iconPath": "static/tabbar/release.png",
        "selectedIconPath": "static/tabbar/release-active.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "static/tabbar/message.png",
        "selectedIconPath": "static/tabbar/message-active.png"
      },
      {
        "pagePath": "pages/order/order",
        "text": "订单",
        "iconPath": "static/tabbar/order.png",
        "selectedIconPath": "static/tabbar/order-active.png"
      }
    ]
  }
}

2. 在 TabBar 组件中添加中间凸起的按钮，例如：

<template>
  <view class="custom-tab-bar">
    <view class="custom-tab-bar-item" v-for="(item, index) in list" :key="index" @click="switchTab(index)">
      <view class="icon">
        <image :src="index === current ? item.selectedIconPath : item.iconPath"></image>
      </view>
      <view class="text" :class="{ 'text-active': index === current }">{{ item.text }}</view>
    </view>
    <view class="custom-tab-bar-center" @click="goReleasePage">
      <image src="static/tabbar/release.png"></image>
    </view>
  </view>
</template>

3. 在 TabBar 组件的样式文件中设置中间凸起的按钮样式，例如：

.custom-tab-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 98rpx;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.custom-tab-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.custom-tab-bar-item .icon {
  width: 40rpx;
  height: 40rpx;
}

.custom-tab-bar-item .icon image {
  width: 100%;
  height: 100%;
}

.custom-tab-bar-item .text {
  font-size: 22rpx;
  color: #999;
  margin-top: 4rpx;
}

.custom-tab-bar-item .text-active {
  color: #007aff;
}

.custom-tab-bar-center {
  position: absolute;
  top: -30rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: #007aff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-tab-bar-center image {
  width: 60rpx;
  height: 60rpx;
}

这样，就可以在 uni-app 中实现 TabBar 中间凸起的效果了。