uniApp开发小程序自定义tabBar底部导航栏+tabBar中间凸起自定义样式实现

在uniApp中，自定义tabBar底部导航栏可以通过修改pages.json文件中的tabBar配置来实现。如果需要实现中间凸起的自定义样式，可以通过创建自定义组件来实现。

以下是一个简单的示例，展示了如何在uniApp中自定义tabBar及其样式：

1. 在pages.json中配置自定义tabBar：

{
  "globalStyle": {
    // ...
  },
  "tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的"
      }
    ]
  }
  // ...
}

2. 创建自定义tabBar组件（例如：components/custom-tab-bar/custom-tab-bar.vue）：

<template>
  <view class="tab-bar">
    <block v-for="(item, index) in tabBarList" :key="index">
      <view class="tab-bar-item" @click="switchTab(item)">
        {{ item.text }}
      </view>
    </block>
    <view class="tab-bar-middle">
      <!-- 中间凸起的自定义样式 -->
    </view>
  </view>
</template>
 
<script>
export default {
  props: {
    tabBarList: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    switchTab(item) {
      uni.switchTab({
        url: item.pagePath,
      });
    },
  },
};
</script>
 
<style>
.tab-bar {
  display: flex;
  /* 其他样式 */
}
.tab-bar-item {
  /* 列表项通常的样式 */
}
.tab-bar-middle {
  /* 中间凸起自定义样式 */
}
</style>

3. 在App.vue中引用自定义tabBar组件：

<template>
  <view>
    <custom-tab-bar :list="tabBarList" />
  </view>
</template>
 
<script>
import CustomTabBar from './components/custom-tab-bar/custom-tab-bar.vue';
 
export default {
  components: {
    CustomTabBar,
  },
  data() {
    return {
      tabBarList: [
        {
          pagePath: '/pages/home/home',
          text: '首页',
        },
        {
          pagePath: '/pages/mine/mine',
          text: '我的',
        },
        // 可以添加更多的tab项
      ],
    };
  },
};
</script>

在这个例子中，我们创建了一个自定义的tabBar组件，并通过props传递了导航项列表。组件中使用了v-for来循环渲染每个tab项，并且有一个tab-bar-middle区域用于自定义中间凸起的样式。点击某个项时，通过调用uni.switchTab来切换页面。

你可以根据自己的设计需求，在custom-tab-bar.vue中的<style>标签内添加CSS样式，并在<view class="tab-bar-middle">内添加中间凸起的自定义样式。