微信小程序底部导航栏中间突出

站在前人基础上研究 =>大神原文，我是在此基础上自己改造的。

业务需求

中间的突出，点击就跳转去别的页面添加

知识点

• 微信自定义底部导航栏页面之间跳转是要用wx.switchTab，但是业务需求我不想跳转到tab页我只想wx.navigateTo去别的（没有tabbar的）页面，你可能会说wx.hideTabBar隐藏tabBar啊，但是这样返回页面会有问题。所以可以借助微信路由组件
• 但是如果想要中间的那个可以用wx.navigateTo，在app.json里的tabbar对象就不要把中间那页加上去，不然会被当做tab页无法使用wx.navigateTo

app里代码

这里只放另外的四页，中间那页别放

直接自定义tabbar

<template>
  <view class="customTabbar" wx:if="{{tabBarShow}}" wx:class="{{{safeDistance:!bottomNum}}}">
    <view class="cell" bindtap="onTabBarChange('user')">
      <view class="imgBox">
        <van-icon
          class="customIcon {{tabBarActive === 'user' ? 'activeCor' : ''}}"
          size="26"
          name="wap-home"
        />
      </view>
      <text class="title {{ tabBarActive === 'user' ? 'activeCor' : '' }}">首页</text>
    </view>
    <view class="cell" bindtap="onTabBarChange('tab2')">
      <view class="imgBox">
        <van-icon
          class="customIcon {{tabBarActive === 'tab2' ? 'activeCor' : ''}}"
          size="26"
          name="chart-trending-o"
        />
      </view>
      <text class="title {{ tabBarActive === 'tab2' ? 'activeCor' : '' }}">tab页2</text>
    </view>

    <!-- switchTab -->
    <!-- <view class="cell" bindtap="onTabBarChange('mid')">
      <view class="imgBox">
        <image src="../assets/images/icon_release.png" mode="aspectFill" class="img_icon" />
      </view>
      <text class="title {{ tabBarActive === 'mid' ? 'activeCor' : '' }}">mid</text>
    </view>-->

    <!-- navigateTo -->
    <navigator class="cell" hover-class="none" open-type="navigate" url="{{path}}">
      <view class="imgBox">
        <image src="../assets/images/icon_release.png" mode="aspectFill" class="img_icon" />
      </view>
      <text class="title {{ tabBarActive === 'mid' ? 'activeCor' : '' }}">添加</text>
    </navigator>

    <view class="cell" bindtap="onTabBarChange('tab3')">
      <view class="imgBox">
        <van-icon
          class="customIcon {{tabBarActive === 'tab3' ? 'activeCor' : ''}}"
          size="26"
          name="chart-trending-o"
        />
      </view>
      <text class="title {{ tabBarActive === 'tab3' ? 'activeCor' : '' }}">tab页3</text>
    </view>
    <view class="cell" bindtap="onTabBarChange('my')">
      <view class="imgBox">
        <van-icon
          class="title {{ tabBarActive === 'my' ? 'activeCor' : '' }}"
          size="26"
          name="user-circle-o"
        />
      </view>
      <text class="title {{ tabBarActive === 'my' ? 'activeCor' : '' }}">我的</text>
    </view>
  </view>
</template>
<script>
import { createComponent } from '@mpxjs/core'
import store from '../store'
createComponent({
  data: {
    activeFlag: 0,
    path: '/pages/mid'
  },
  computed: {
    tabBarActive() { // 用于标记那个激活
      return store.state.tabBarActive
    },
    bottomNum() { // 判断是否是全面屏（demo可以不写）
      return store.state.bottomNum
    },
    tabBarShow() { // 自定义导航栏无法使用wx.hidetabbar，可以用这个控制
      return store.state.tabBarShow
    }
  },
  methods: {
    onTabBarChange(string) {
      store.commit('CHANGE_TABER', string)
      wx.switchTab({ url: '/pages/' + string })
    }
  }
})
</script>
<style lang="stylus">
.customTabbar
  width 100%
  display flex
  justify-content space-between
  border-top 1px solid #efefef
  background #fff
  .cell
    width 20%
    height 100rpx
    display flex
    flex-direction column
    justify-content center
    .imgBox
      width 100%
      height 50rpx
      display flex
      justify-content center
      .img_icon
        position absolute
        /* left: 77rpx; */
        top -36rpx
        width 96rpx
        height 96rpx
        border-radius 50%
        border-top 2rpx solid #f2f2f3
        background-color #fff
        text-align center
        box-sizing border-box
        padding 6rpx
      .customIcon
        color #909090
    .title
      font-size 24rpx
      text-align center
      color #909090
.activeCor
  color #E92F20 !important
.safeDistance
  margin-bottom 60rpx
</style>
<script type='application/json' lang='json'>
  { 
    "component": true,
    "usingComponents": {
        "van-icon": "@vant-weapp/weapp/dist/icon/index"
    }
  }
</script>