uniapp 自定义悬浮底部tabbar

你可以使用uni-app提供的自定义组件和样式来实现悬浮底部的tabbar。以下是一个简单的示例：

1. 创建一个自定义组件，例如命名为`custom-tabbar`。
2. 在`custom-tabbar`组件中，使用`fixed`定位和负的`bottom`值来实现悬浮在底部。
3. 在`custom-tabbar`组件中，添加tabbar的选项卡，并处理点击事件。
4. 在页面中引入`custom-tabbar`组件，并将选项卡的数据传递给组件。

下面是示例代码：

<!-- custom-tabbar.vue -->
<template>
  <view class="custom-tabbar">
    <view class="tabbar-item" v-for="(item, index) in tabbarList" :key="index" @click="handleClick(index)">
      <image :src="item.icon"></image>
      <text>{{ item.title }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabbarList: [
        { title: '首页', icon: 'home' },
        { title: '消息', icon: 'message' },
        { title: '我的', icon: 'user' }
      ]
    };
  },
  methods: {
    handleClick(index) {
      // 处理点击事件
      console.log('点击了第', index + 1, '个选项卡');
    }
  }
};
</script>

<style>
.custom-tabbar {
  position: fixed;
  bottom: -10px; /* 负的bottom值，使其悬浮在底部 */
  width: 100%;
  height: 50px;
  background-color: #fff;
  box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tabbar-item image {
  width: 24px;
  height: 24px;
}

.tabbar-item text {
  font-size: 12px;
  margin-top: 6px;
}
</style>

在页面中使用`custom-tabbar`组件：

<!-- index.vue -->
<template>
  <view>
    <!-- 页面内容 -->
    <view>内容</view>

    <!-- 引入自定义tabbar组件 -->
    <custom-tabbar></custom-tabbar>
  </view>
</template>

<script>
import CustomTabbar from '@/components/custom-tabbar.vue';

export default {
  components: {
    CustomTabbar
  }
};
</script>

<style>
/* 页面样式 */
</style>

这样，你就可以实现一个自定义悬浮底部的tabbar了。你可以根据自己的需求来修改`custom-tabbar`组件的样式和功能。