uniapp使用vue3和ts开发小程序自定义tab栏，实现自定义凸出tabbar效果

红太狼 2024-02-19 08:57 70阅读 0赞

![0727a2e708ee4b5a81ae186c87793caa.png][]要实现自定义的tabbar效果，可以使用自定义tab覆盖主tab来实现，当程序启动或者从后台显示在前台时隐藏自带的tab来实现。自定义一个tab组件，然后在里面实现自定义的逻辑。

组件中所使用的组件api可以看：[Tabbar 底部导航栏 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架][Tabbar _ _ uView 2.0 - _ nvue _ uni-app _ - uni-app UI]

先在components/tabbar/里面实现组件逻辑：

<template>
      <u-tabbar :value="tabIndex" @change="change" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
        <u-tabbar-item text="首页" icon="home"></u-tabbar-item>
        <view class="tabars" @click="tabMiddle">
          <view class="item">
            <image class="img" src="../../static/images/gongshang.png" mode="widthFix"></image>
          </view>
        </view>
        <u-tabbar-item text="我的" icon="account"></u-tabbar-item>
      </u-tabbar>
    </template>
    
    <script setup lang="ts">
    import { ref } from 'vue';
    
    
    const tabIndex = ref(0);
    
    const change = function (index) {
      tabIndex.value = index
      console.log("调用父组件的tab切换", index);
      if (index == 0) {
        uni.switchTab({
          url: '/pages/home/index'
        })
      } else if (index == 1) {
        uni.switchTab({
          url: '/pages/my/index'
        })
      }
    };
    
    // 点击中间凸出来的tab
    const tabMiddle = function () {
      console.log("点击中间的tab");
    }
    
    
    </script>
    
    <style lang="scss">
    .tabars {
      width: 90rpx;
      height: 70rpx;
      display: flex;
      flex-direction: column;
      align-content: center;
      position: relative;
      bottom: 50rpx;
      border-radius: 50%;
      background-color: #fff;
      border-top: 2px solid #dadbde;
      padding: 30rpx;
    
      .item {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
    
        .img {
          width: 80%;
        }
      }
    }
    </style>

组件里面实现tab切换的api里面使用规范：[uni.navigateTo(OBJECT) | uni-app官网][uni.navigateTo_OBJECT_ _ uni-app]

注意看使用switchTab的时候，url的前面要有/，然而pages.json里面的是不需要的。

![54c43e1788fa4bd987e552d47b2f2dc1.png][]

然后只需要在tab的主页面中引入这个组件即可：![7fbe07e774014c10887ab5c725b7275c.png][]

然后重新打开即可看到效果：![31d52268923c4472911a6fa51071a0fa.png][]

[0727a2e708ee4b5a81ae186c87793caa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/3772297b36ce49c881362a74f25974f2.png
[Tabbar _ _ uView 2.0 - _ nvue _ uni-app _ - uni-app UI]: https://www.uviewui.com/components/tabbar.html
[uni.navigateTo_OBJECT_ _ uni-app]: https://uniapp.dcloud.net.cn/api/router.html#switchtab
[54c43e1788fa4bd987e552d47b2f2dc1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/655297f15c7841499661f1eac73b089f.png
[7fbe07e774014c10887ab5c725b7275c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/6ea88c926055418e8ecf44edfadf3cf3.png
[31d52268923c4472911a6fa51071a0fa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/39cb31dad466467da307a3bfc5c56786.png