Uniapp如何实现底部导航栏凸起

Uniapp实现底部导航栏凸起可以通过自定义组件和flex布局来实现。

1. 创建自定义组件

在Uniapp项目中创建一个自定义组件，组件中包含一个`tab-bar`容器和几个`tab-item`，示例代码如下：

<template>
  <div class="tab-bar">
    <div class="tab-item" :class="{active: activeIndex === 0}" @click="handleTabClick(0)">
      <img src="/static/home.png" alt="">
      <span>首页</span>
    </div>
    <div class="tab-item" :class="{active: activeIndex === 1}" @click="handleTabClick(1)">
      <img src="/static/category.png" alt="">
      <span>分类</span>
    </div>
    <div class="tab-item" :class="{active: activeIndex === 2}" @click="handleTabClick(2)">
      <img src="/static/cart.png" alt="">
      <span>购物车</span>
    </div>
    <div class="tab-item" :class="{active: activeIndex === 3}" @click="handleTabClick(3)">
      <img src="/static/user.png" alt="">
      <span>我的</span>
    </div>
    <div class="tab-item-center" @click="handleTabClick(-1)">
      <img src="/static/center.png" alt="">
    </div>
  </div>
</template>

<script>
export default {
  props: {
    activeIndex: {
      type: Number,
      default: 0
    }
  },
  methods: {
    handleTabClick(index) {
      this.$emit('tab-click', index)
    }
  }
}
</script>

<style>
.tab-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  height: 60px;
  padding: 0 20px;
  box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.1);
}

.tab-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: #666;
}

.tab-item.active {
  color: #2d8cf0;
}

.tab-item img {
  width: 24px;
  height: 24px;
  margin-bottom: 6px;
}

.tab-item-center {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #2d8cf0;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}

.tab-item-center img {
  width: 32px;
  height: 32px;
}
</style>

2. 使用自定义组件

在需要使用底部导航栏的页面中，引入自定义组件并使用`flex`布局，示例代码如下：

<template>
  <div class="page">
    <div class="content">
      <!-- 页面内容 -->
    </div>
    <TabBar :active-index="activeIndex" @tab-click="handleTabClick" />
  </div>
</template>

<script>
import TabBar from '@/components/tab-bar'

export default {
  components: {
    TabBar
  },
  data() {
    return {
      activeIndex: 0
    }
  },
  methods: {
    handleTabClick(index) {
      if (index === -1) {
        // 中间凸起部分被点击
        // 处理逻辑
      } else {
        // 底部导航栏被点击
        // 处理逻辑
      }
    }
  }
}
</script>

<style>
.page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.content {
  flex: 1;
}

</style>

以上代码中，将自定义组件`TabBar`作为页面的底部导航栏，使用`flex`布局将页面内容和底部导航栏放在同一个容器中，可以实现底部导航栏凸起的效果。

需要注意的是，自定义组件中的`tab-item-center`元素使用了绝对定位，需要手动调整其位置和样式。在页面中处理底部导航栏被点击的事件，可以通过`$emit`方法将事件传递给父组件处理。