uniapp底部导航栏中间凸起_uniapp开发一个小视频应用(一)

好的，我了解了您的问题。首先，要实现底部导航栏中间凸起的效果，可以使用uni-ui组件库中的tabBar组件。在tabBar组件中，可以设置中间按钮为凸起样式，并使用自定义图标和文本。

接下来，我将为您介绍如何使用uni-ui中的tabBar组件，并实现中间凸起的效果。

1. 安装uni-ui组件库

在HBuilderX中，打开您的uni-app项目，选择菜单栏的“工具”-“插件市场”，搜索并安装“uni-ui”组件库。

2. 引入tabBar组件

在需要使用tabBar组件的页面中，引入tabBar组件：

<template>
  <view>
    <tab-bar :tabList="tabList" :current="current" @change="changeTab"></tab-bar>
  </view>
</template>

<script>
  import tabBar from '@/uni-ui/tabBar/tabBar.vue'
  export default {
    components: {
      tabBar
    },
    data() {
      return {
        tabList: [
          {
            pagePath: '/pages/home/home',
            text: '首页',
            iconPath: '/static/tabbar/home.png',
            selectedIconPath: '/static/tabbar/home-active.png'
          },
          {
            pagePath: '/pages/video/video',
            text: '视频',
            iconPath: '/static/tabbar/video.png',
            selectedIconPath: '/static/tabbar/video-active.png'
          },
          {
            pagePath: '/pages/mine/mine',
            text: '我的',
            iconPath: '/static/tabbar/mine.png',
            selectedIconPath: '/static/tabbar/mine-active.png'
          }
        ],
        current: 0
      }
    },
    methods: {
      changeTab(e) {
        this.current = e.index
        uni.switchTab({
          url: this.tabList[e.index].pagePath
        })
      }
    }
  }
</script>

在上述代码中，tabList数组中定义了三个tab，分别对应三个页面。通过设置iconPath和selectedIconPath属性，可以设置未选中和选中状态下的图标。在changeTab方法中，通过uni.switchTab方法实现tab之间的切换。

3. 实现中间凸起的效果

要实现中间凸起的效果，可以在tabBar组件中添加一个自定义的tab，设置其样式为凸起，并与其他tab一起渲染。在changeTab方法中，可以通过判断当前点击的tab是否为自定义tab，来实现特殊处理。

<template>
  <view class="tab-bar">
    <view class="tab" v-for="(item, index) in tabList" :key="index" @click="changeTab({index})">
      <view :class="['icon', current === index ? 'active' : '']">
        <image :src="current === index ? item.selectedIconPath : item.iconPath"></image>
        <text>{{item.text}}</text>
      </view>
      <view class="custom-tab" v-if="index === 1" @click.stop="changeTab({index: -1})">
        <image src="/static/tabbar/plus.png"></image>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      tabList: {
        type: Array,
        default: []
      },
      current: {
        type: Number,
        default: 0
      }
    },
    methods: {
      changeTab(e) {
        if (e.index === -1) {
          // 点击自定义tab的处理逻辑
          // ...
        } else {
          this.$emit('change', e)
        }
      }
    }
  }
</script>

<style scoped>
  .tab-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    background-color: #fff;
  }
  .tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    color: #666;
  }
  .active .icon {
    color: #f00;
  }
  .custom-tab {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10rpx;
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background-color: #f00;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .custom-tab image {
    width: 50rpx;
    height: 50rpx;
  }
</style>

在上述代码中，通过v-if指令判断当前渲染的tab是否为自定义tab（即第二个tab），如果是则渲染一个自定义tab，并设置其样式为凸起。在changeTab方法中，通过判断点击的tab的index是否为-1，来判断是否点击了自定义tab。

至此，您已经了解了如何使用uni-ui中的tabBar组件，并实现底部导航栏中间凸起的效果。接下来，您可以继续开发您的小视频应用。