uni-app实现底部导航中间凸起案例已开源

针对你提到的 uni-app 实现底部导航中间凸起案例已开源的需求，这里提供一个简化的代码示例，展示如何通过自定义样式实现这一效果。假设你已经有一个 uni-app 项目，并且已经安装和配置好了开发环境。

1. 修改 pages.json

首先，在 pages.json 中配置底部导航栏的页面路径和图标：

{
  "pages": [
    // ... 其他页面配置
  ],
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/icon_home.png",
        "selectedIconPath": "static/icon_home_active.png"
      },
      {
        "pagePath": "pages/about/about",
        "text": "关于",
        "iconPath": "static/icon_about.png",
        "selectedIconPath": "static/icon_about_active.png"
      },
      {
        "pagePath": "pages/center/center",
        "text": "我的",
        "iconPath": "static/icon_center.png",
        "selectedIconPath": "static/icon_center_active.png",
        "customStyle": "{\"height\": \"60px\", \"lineHeight\": \"60px\"}" // 中间项自定义样式
      }
    ]
  }
}

注意：customStyle 属性是假设的，实际上 uni-app 的 tabBar 不直接支持这种自定义高度。这里只是为了说明目的。真正实现需要借助自定义组件。

2. 使用自定义组件实现凸起效果

由于 uni-app 不直接支持在 tabBar 中自定义高度，我们可以通过覆盖默认的 tabBar，使用自定义组件来实现。

2.1 创建自定义组件 CustomTabBar

在 components 目录下创建一个名为 CustomTabBar 的组件，并在其中实现底部导航栏，包括中间凸起的效果。

<!-- CustomTabBar.vue -->
<template>
  <view class="tab-bar">
    <!-- 左侧项 -->
    <view class="tab-bar-item" @click="navigateTo('pages/index/index')">
      <!-- 图标和文字 -->
    </view>
    <!-- 中间项，增加凸起效果 -->
    <view class="tab-bar-item tab-bar-item-center" @click="navigateTo('pages/center/center')">
      <!-- 图标和文字 -->
    </view>
    <!-- 右侧项 -->
    <view class="tab-bar-item" @click="navigateTo('pages/about/about')">
      <!-- 图标和文字 -->
    </view>
  </view>
</template>

<style scoped>
.tab-bar {
  /* 布局样式 */
}
.tab-bar-item {
  /* 通用样式 */
}
.tab-bar-item-center {
  height: 60px; /* 凸起高度 */
  line-height: 60px;
  /* 其他凸起样式 */
}
</style>

<script>
export default {
  methods: {
    navigateTo(pagePath) {
      uni.navigateTo({ url: pagePath });
    }
  }
}
</script>

2.2 在 App.vue 中使用自定义组件

<!-- App.vue -->
<template>
  <view>
    <!-- 应用内容 -->
    <CustomTabBar />
  </view>
</template>

<script>
import CustomTabBar from './components/CustomTabBar.vue';

export default {
  components: {
    CustomTabBar
  }
}
</script>

通过上述步骤，你可以实现一个自定义的底部导航栏，并在其中实现中间凸起的效果。由于 uni-app 的限制，直接使用 tabBar 配置可能无法满足所有自定义需求，因此采用自定义组件是一个灵活且强大的解决方案。