uniapp自定义底部tabbar 中间圆角

### 实现带有圆形中心按钮的自定义底部 TabBar

在 UniApp 应用中创建带有圆形中心按钮的自定义底部 TabBar 需要综合运用多个技术点。由于 `uni.setTabBarStyle` 的自定义能力有限[^1]，建议通过组合 HTML、CSS 和 JavaScript 来实现更复杂的样式定制。

#### 使用原生组件与 CSS 定制中间按钮

为了达到最佳效果，可以考虑放弃默认的 tabbar 组件，转而采用完全自定义的方式构建 tabbar。具体做法是在页面底部放置一个固定定位的容器作为新的 tabbar，并在其内部添加五个绝对定位的子元素表示各个选项卡项。对于位于中央位置的那个特殊项目，则可以通过额外附加类名来进行特定样式的设定：

<template>
  <view class="custom-tab-bar">
    <!-- 左侧两个常规图标 -->
    <navigator url="/pages/index/index" open-type="switchTab" hover-class="none"
      :class="{ active: currentIndex === 0 }">首页</navigator>
    <navigator url="/pages/logs/logs" open-type="switchTab" hover-class="none"
      :class="{ active: currentIndex === 1 }">日志</navigator>

    <!-- 圆形悬浮按钮 -->
    <button @click="handleMidButtonClick()" class="mid-button"></button>

    <!-- 右侧两个常规图标 -->
    <navigator url="/pages/user/user" open-type="switchTab" hover-class="none"
      :class="{ active: currentIndex === 3 }">我的</navigator>
    <navigator url="/pages/cart/cart" open-type="switchTab" hover-class="none"
      :class="{ active: currentIndex === 4 }">购物车</navigator>
  </view>
</template>

<script lang="ts">
import { ref, computed } from 'vue';
export default {
  setup() {
    const currentRoute = getCurrentPages()[getCurrentPages().length - 1].route;
    
    let currentIndex = computed(() => {
        switch (currentRoute) {
          case '/pages/index/index': return 0;
          case '/pages/logs/logs': return 1;
          case '/pages/midButtonPage/midButtonPage': return 2;
          case '/pages/user/user': return 3;
          case '/pages/cart/cart': return 4;
          default: return null;
        }
      });

    function handleMidButtonClick(){
      // 处理中部按钮逻辑...
      console.log('Middle button clicked');
      
      // 路由跳转至指定页面
      uni.navigateTo({
        url:'/pages/midButtonPage/midButtonPage'
      });
    }

    return {
      currentIndex,
      handleMidButtonClick
    };
  },
};
</script>

<style scoped>
.custom-tab-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 98rpx;
  background-color: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.mid-button {
  position: absolute;
  left: calc(50% - 40rpx);
  top: -30rpx;
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);
  z-index: 10;
}
</style>

此方法允许更加灵活地控制每个项目的外观以及交互行为，尤其是针对那个独特的圆形按钮。需要注意的是，在实际开发过程中可能还需要处理更多细节问题，如不同平台下的兼容性调整等。