uniapp里小程序自定义tabbar，实现中间item凸起效果

一、 效果

图标随便弄得，主要是这个步骤记录一下。

二、新建tababr页面

三 、page.json配置tabbar

"tabBar": {
    "color": "#ffffff",
    "selectedColor": "#6777FD",
    "custom": true,
    "list": [{
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/static/logo.png",
        "selectedIconPath": "/static/logo.png"

      },
      {
        "pagePath": "pages/code/code",
        "text": "扫码",
        "iconPath": "/static/logo.png",
        "selectedIconPath": "/static/logo.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "/static/logo.png",
        "selectedIconPath": "/static/logo.png"
      }
    ]
  },

四、自定义组件

路径 把菜单数据定义在data里，然后遍历渲染

<template>
  <view class="tab-bar">
    <!--  循环每个 item 菜单 -->
    <!-- 定义两个class，一个是默认的样式tab-bar-item，一个是中间凸起的样式code-->
    <view v-for="(item,index) in tabBarList" :key="index" :class="{'tab-bar-item': item.id!=1,code:item.id==1}"
      @click="switchTab(item, index)">
      <view class="tab_text" :style="{color: selected == index ? selectedColor : color}">
        <!-- 图标，当前选中就是selectedIconPath，否则就是默认的iconPath-->
        <image class="tab_img" :src="selected == index ? item.selectedIconPath : item.iconPath"></image>
        <!-- 中间菜单不显示文字，index不是1的显示文字-->
        <template v-if="index!==1">
          <view>{{ item.text }}</view>
        </template>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { defineProps, ref } from 'vue'

  // 子组件传递参数
  const props = defineProps({
    selected: {
      type: Number,
      default: 0
    }
  })

  // 默认颜色
  let color = ref('#000')
  // 选中的颜色
  let selectedColor = ref('#ffb2b2')
  // 菜单栏集合 - 与 pages.json -> tabbar 配置一样
  let tabBarList = ref([{
      "id": 0,
      "pagePath": "/pages/index/index",
      "iconPath": "../../static/logo.png",
      "selectedIconPath": "../../static/logo.png",
      "text": "首页"
    },
    {
      "id": 1,
      "pagePath": "/pages/code/code",
      "iconPath": "../../static/logo.png",
      "selectedIconPath": "../../static/logo.png",
      "text": "扫码"
    },
    {
      "id": 2,
      "pagePath": "/pages/my/my",
      "iconPath": "../../static/logo.png",
      "selectedIconPath": "../../static/logo.png",
      "text": "我的"
    }
  ])
  // 隐藏原生TabBar
  uni.hideTabBar();
  // 跳转tabBar菜单栏
  const switchTab = (item) => {
    let url = item.pagePath;
    uni.switchTab({
      url
    })
  }
</script>

<style lang="less" scoped>
  // 外部装修
  .tab-bar {
    position: fixed;
    bottom: 0;
    left: 0rpx;
    right: 0rpx;
    height: 100rpx;
    background: white;
    padding: 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(165, 168, 171, 0.83) !important;

    // 给每个 item 设置样式
    .tab-bar-item {
      //flex: 0.5;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      width: 150rpx;
      padding: 15rpx;
      background-color: transparent;
      transition: all 0.5s ease-in-out;
      margin: auto;

      // 限制每个icon的大小
      .tab_img {
        width: 37rpx;
        height: 41rpx;
      }

      // 限制文字大小
      .tab_text {
        font-size: 20rpx;
        margin-top: 9rpx;
        flex: 1;
      }
    }

    //中间凸起扫码
    .code {
      position: relative;
      top: -60rpx;
      width: 120rpx;
      height: 120rpx;
      border-radius: 60rpx;
      background-color: #2b9939;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;

      // 限制每个icon的大小
      .tab_img {
        width: 70rpx;
        height: 78rpx;
      }
    }
  }
</style>

五、组件中使用

index.vue

<template>
  index
  <tabbar selected="0"></tabbar>
</template>

<script>
  import tabbar from "../../components/tabbar/tabbar.vue";
</script>

<style>
</style>

code.vue

<template>
  code
  <tabbar selected="1"></tabbar>
</template>

<script setup>
  import tabbar from "../../components/tabbar/tabbar.vue";
</script>

<style lang="scss">

</style>

my.vue

<template>
  index<tabbar selected="2"></tabbar>
</template>

<script>
  import tabbar from "../../components/tabbar/tabbar.vue";
</script>

<style lang="scss">

</style>