小程序如何实现中间带加号的tabbar

<view class="tabbar_box {{isIphoneX ? 'iphoneX-height':''}}">
    <block wx:for="{{tabbar}}" wx:key="index">
        <navigator wx:if="{{item.isSpecial}}" hover-class="none" url="{{item.pagePath}}" class="tabbar_nav {{item.selected?'selected' : ''}}" open-type="navigate">
            <view class='special-wrapper'>+</view>
        </navigator>
        <navigator wx:else hover-class="none" url="{{item.pagePath}}" class="tabbar_nav {{item.selected?'selected' : ''}}" open-type="switchTab">
            <image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
            <text>{{item.text}}</text>
        </navigator>
    </block>
</view>

 data: {
    isIphoneX: app.globalData.systemInfo.model.search('iPhone X') != -1 ? true : false,
    tabbar: [{
        "pagePath": "/teacher/pages/teach/classroom/classroom",
        "iconPath": "/image/index.png",
        "selectedIconPath": "/image/index-active.png",
        "text": "首页"
    },
    {
        "pagePath": "/teacher/pages/teach/publish/publish",
        "isSpecial": true,
    },
    {
        "pagePath": "/teacher/pages/teach/mine/mine",
        "iconPath": "/image/index.png",
        "selectedIconPath": "/image/index-active.png",
        "text": "我的"
    }],
}

{
  "usingComponents": {
    "custom-tabbar": "../../components/common/custom-tabbar/custom-tabbar",
  }
}

<custom-tabbar from="classroom"></custom-tabbar>

setTabbar(){
    let currentPages = getCurrentPages();
    let pagePath = currentPages[currentPages.length - 1].route;
    this.data.tabbar.forEach(item => {
        item.selected = false;
        if(item.pagePath.indexOf(pagePath) > -1){
            item.selected = true;
        }
    })
    this.setData({
        tabbar: this.data.tabbar
    });
 }

.tabbar_box{
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 98rpx;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}

.tabbar_box.iphoneX-height{
    padding-bottom: 66rpx;
}

.middle-wrapper{
  position: absolute;
  right: 310rpx;
  bottom: 0;
  background-color: #fff;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border-top: 2rpx solid #f2f2f3;
}

.middle-wrapper.iphoneX-height{
  bottom: 66rpx;
}

.tabbar_nav{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 20rpx;
    height: 100%;
    position: relative;
    color: rgba(0, 0, 0, 0.45);
    font-size: 24rpx;
}

.tabbar_icon{
    width: 42rpx;
    height: 42rpx;
    margin-bottom: 10rpx;
}

.special-wrapper{
  position: absolute;
  top: -30rpx;
  width: 74rpx;
  height: 74rpx;
  border-radius: 50%;
  background-color: var(--main-font-color);
  text-align: center;
  box-sizing: border-box;
  padding: 6rpx;
  font-size: 54rpx;
  line-height: 54rpx;
  color: #fff;
}

.selected {
    color: var(--main-font-color);
}