uni-app微信小程序定义tabbar导航栏中间凸起

### 实现中间凸起 Tabbar 导航栏

在 uni-app 开发的微信小程序中实现带有中间凸起按钮的底部导航栏，可以通过自定义 `tabBar` 并结合 CSS 和 JavaScript 来完成。以下是具体方法：

#### HTML 结构
创建页面结构并引入必要的组件。

<template>
  <view class="container">
    <!-- 自定义 tabBar -->
    <view class="custom-tab-bar" :style="{ bottom: isTabFixed ? '0' : '-50px' }">
      <navigator url="/pages/index/index" open-type="switchTab" hover-class="none"
        class="tab-item" :class="[currentPage === '/pages/index/index' ? 'active' : '']">
        <image src="/static/tabbar/home.png"></image>
        <text>首页</text>
      </navigator>

      <navigator url="/pages/cart/cart" open-type="switchTab" hover-class="none"
        class="tab-item raised-button" @click="handleRaisedButtonClick()">
        <image src="/static/tabbar/add.png"></image>
      </navigator>

      <navigator url="/pages/user/user" open-type="switchTab" hover-class="none"
        class="tab-item" :class="[currentPage === '/pages/user/user' ? 'active' : '']">
        <image src="/static/tabbar/user.png"></image>
        <text>我的</text>
      </navigator>
    </view>
    
    <!-- 页面主体内容 -->
    <view class="page-content">
      <!-- 这里放置页面的主要内容 -->
    </view>
  </view>
</template>

#### 样式设计
通过 CSS 定义样式来使中间按钮呈现为圆形且突出显示。

<style scoped>
.custom-tab-bar {
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .1);
}

.tab-item {
  text-align: center;
  font-size: 12px;
}

.raised-button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  border-radius: 50%;
  padding: 10px;
  background-color: #ff6f61; /* 颜色可根据需求调整 */
  color: white;
}
</style>

#### JS逻辑处理
编写脚本控制当前选中的页面以及响应点击事件。

<script>
export default {
  data() {
    return {
      currentPage: getCurrentPages().pop().route,
      isTabFixed: true // 控制 tabBar 是否固定到底部
    };
  },
  
  methods: {
    handleRaisedButtonClick() {
      console.log('Middle button clicked');
      // 可在此处添加更多交互逻辑
    }
  },

  onLoad(options) {
    this.currentPage = options.page || '/';
  }
};
</script>

#### pages.json配置
确保在项目的 `pages.json` 文件内正确设置 tabBar 的路径和其他属性。

{
  "path": "pages/index/index",
  "style": {
    "navigationBarTitleText": "首页",
    ...
  },
  "tabBar": {
    "list": [
      { ... }, // 对应于各个选项卡的信息对象数组
      {
        "pagePath": "pages/middleButtonPage/middleButtonPage", // 中间按钮关联的页面路径
        "iconPath": "/static/tabbar/add.png",
        "selectedIconPath": "/static/tabbar/add-active.png",
        "text": ""
      },
      { ... }
    ],
    "color": "#9B9B9B",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff"
  }
}

上述代码片段展示了如何构建一个具有独特视觉效果的 tab bar，在其中央位置有一个特别设计过的按钮[^1]。此方案不仅适用于微信小程序环境下的应用开发，同时也能够很好地适配其他平台的需求[^2]。