<view class="tabbar-container" style="--wv-tabbar-background: {{background}}">
  <scroll-view scroll-x 
    scroll-left="{{tabbarScrollLeft}}"
    scroll-with-animation="{{true}}"
    enhanced="{{true}}"
    show-scrollbar="{{false}}"
    bounces="{{true}}"
    class="wv-tabbar">
    <block wx:if="{{showIndicator && indicatorPosition == 'top'}}">
      <view class="wv-tabbar-indicator {{indicatorPosition}}" style="--wv-indicator-height: {{indicatorHeight}}; ">
        <view class="indicator wv-theme {{indicatorTheme}} animation-{{indicatorAnimation}} {{_animStopIndicator? 'anim-stop' : 'anim-run'}}"  
              style="{{indicatorStyle}} {{indicatorColor ? 'background-color:' + indicatorColor + ';' : ''}} {{indicatorRadius ? 'border-radius:' + indicatorRadius + ';' : ''}} --wv-indicator-animation-duration: {{indicatorAnimationDuration}}ms;"></view>
      </view>
    </block>

    <view class="wv-tabbar-content wv-flex justify-{{ align }} {{ noWrap? 'nowrap' : 'wrap' }} {{ showIndicator ? '' : 'no-indicator' }} {{!gap || gap === '0' || gap === '0px' || gap === '0rpx' ? 'no-gap' : ''}}" 
          style="{{gap ? 'gap: ' + gap + ';' : ''}}">
      <slot></slot>
    </view>

    <block wx:if="{{showIndicator && indicatorPosition == 'bottom'}}">
      <view class="wv-tabbar-indicator {{indicatorPosition}}" style="--wv-indicator-height: {{indicatorHeight}}; ">
        <view class="indicator wv-theme {{indicatorTheme}} animation-{{indicatorAnimation}} {{_animStopIndicator? 'anim-stop' : 'anim-run'}}"  
              style="{{indicatorStyle}} {{indicatorColor ? 'background-color:' + indicatorColor + ';' : ''}} {{indicatorRadius ? 'border-radius:' + indicatorRadius + ';' : ''}} --wv-indicator-animation-duration: {{indicatorAnimationDuration}}ms;"></view>
      </view>
    </block>
  </scroll-view>
</view>