miniProgram/custom-tab-bar/index.wxml

<!--miniprogram/custom-tab-bar/index.wxml-->
<view class="m-tab-bar">
  <!-- <view class="tab-bar-border"></view> -->
  <view class="bg-tab-bar">

    <image src="/static/tabs/tab-bar-bg.png" style="width: 100vw;height: 52px;" />
    <view class="bg-bottom"></view>
  </view>

  <view class="m-tab-list">
    <view class="m-tab-box m-tab-box-l">
      <view wx:for="{{list}}" wx:key="index" class="m-tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}"
        bindtap="switchTab" wx:if="{{index < 2}}">
        <image wx:if="{{selected === index}}" src="{{ item.selectedIconPath }}"></image>
        <image wx:if="{{selected !== index}}" src="{{ item.iconPath }}"></image>
        <view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
      </view>

    </view>
    <view class="m-tab-box m-tab-box-r">
      <view wx:for="{{list}}" wx:key="index" class="m-tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}"
        bindtap="switchTab" wx:if="{{index >= 2}}">
        <image wx:if="{{selected === index}}" src="{{ item.selectedIconPath }}"></image>
        <image wx:if="{{selected !== index}}" src="{{ item.iconPath }}"></image>
        <view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
      </view>
    </view>
  </view>
  <view class="scan-code-btn-view">
    <image class="scan-code-btn" src="/static/tabs/scan.png" data-path="/pages/scan/scan" data-index="4"
      bindtap="switchTab" />
  </view>
</view>