微信小程序自定义tabbar组件之中间按钮凸起

和我前面一篇文章差不多的， 只不过逻辑有点不同，直接上效果和代码吧

有个注意事项：如果用次调转出了小程序界面（如支付成功的界面，底部的隐藏tabbar会无法隐藏）

这里是github代码的路径，直接可以拉下来。
github代码拉取地址：https://github.com/lzn961136007/tabbar.git

先来一个模板文件，我的图片放在模板文件里
wxml

<view class="tabbar_box {
  {isIphoneX?'iphoneX-height':''}}" style="background-color:{
  {tabbar.backgroundColor}}">
  <block wx:for="{
  {tabbar.list}}" wx:key="{
  {item.pagePath}}">

    <navigator wx:if="{
  {item.isSpecial == true}}" class="tabbar_nav" hover-class="none" url="{
  {item.pagePath}}" style="color:{
  {tabbar.selectedColor}}" open-type="navigate">
      <view class='special-wrapper'><image class="tabbar_icon" src="{
  {item.iconPath}}"></image></view>
      <image class='special-text-wrapper'></image>
      <text>{
  {item.text}}</text>
    </navigator>
    
    <navigator wx:else class="tabbar_nav" hover-class="none" url="{
  {item.pagePath}}" style="color:{
  {item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="switchTab">
      <image class="tabbar_icon" src="{
  {item.selected ? item.selectedIconPath : item.iconPath}}"></image>
      <text>{
  {item.text}}</text>
    </navigator>
  </block>
</view>

wxss

.tabbar_box{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    z-i