uniapp底部tabbar自定义 实现凸起+透明底部效果

你可以通过自定义底部 Tabbar 来实现凸起透明底部的效果。下面是一种实现方式：

1. 在 `uniapp` 项目的 `static` 目录下创建一个 `custom-tabbar` 文件夹，用于存放自定义 Tabbar 的相关资源。

2. 在 `custom-tabbar` 文件夹中创建一个 `tabbar.vue` 组件文件，作为自定义 Tabbar 的模板。在模板中，你可以使用 `<template>` 标签定义底部 Tabbar 的布局。

3. 在 `tabbar.vue` 组件中，使用 `<slot>` 标签创建插槽，用于显示外部传入的 Tabbar 内容。同时，在该标签上添加样式，使其能够凸起显示。

   <template>
     <div class="custom-tabbar">
       <slot></slot>
     </div>
   </template>

   <style scoped>
   .custom-tabbar {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     background-color: transparent;
     border-top: 1px solid #ccc;
     display: flex;
     flex-direction: row;
   }
   </style>

4. 在需要使用自定义 Tabbar 的页面中引入 `custom-tabbar` 组件，并在该组件内部插入具体的 Tabbar 内容。

   <template>
     <div>
       <!-- 此处为页面内容 -->
       ...
       <!-- 引入自定义 Tabbar -->
       <custom-tabbar>
         <!-- 插入具体的 Tabbar 内容 -->
         <view class="tabbar-item">首页</view>
         <view class="tabbar-item">消息</view>
         <view class="tabbar-item">我的</view>
       </custom-tabbar>
     </div>
   </template>

   <style>
   .tabbar-item {
     flex: 1;
     padding: 10px;
     text-align: center;
   }
   </style>

5. 根据实际需求，你可以在 Tabbar 的模板中添加更多的样式和交互逻辑。

这样，你就可以实现一个自定义的底部 Tabbar，使其能够凸起并具有透明底部的效果。