<view class="amd-vtabs {{className ? className : ''}}">
  <view class="amd-vtabs-bar">
    <scroll-view class="amd-vtabs-bar-scroll-view"
      scroll-top="{{tabTop}}"
      scroll-y="{{true}}">
      <view class="amd-vtabs-bar-item-wrap">
          <tap-modal
            a:for="{{_tabs}}"
            disabled="{{item.disabled}}"
            payload="{{index}}"
            onTap="onChange">
            <view class="amd-vtabs-bar-item {{_index - index?'' : 'amd-vtabs-bar-item-active'}} {{item.disabled?'amd-vtabs-bar-item-disabled' : '' }}"
              style="{{`${_index + 1 === index ? 'border-radius: 0 16rpx 0 0': ''};${_index - 1 === index ? 'border-radius: 0 0 16rpx 0': ''}`}}"
              >
              <badge a:if="{{item.badge}}" type="{{item.badge.type}}" bubble="{{!!item.badge.bubble}}" text="{{item.badge.text}}">
              <text class="amd-vtabs-bar-item-title">
                <slot name="title" tab="{{item}}">{{item.title}}</slot>
              </text>
            </badge>
            <text a:else class="amd-vtabs-bar-item-title">
              <slot name="title" tab="{{item}}">{{item.title}}</slot>
            </text>
              <text class="amd-vtabs-bar-item-count" a:if="{{item.count}}">({{item.count}})</text>
              <!-- <view class="amd-vtabs-bar-item-icon">
                <slot name="icon" tab="{{item}}"/>
              </view> -->
          </view>
        </tap-modal>
      </view>
    </scroll-view>
  </view>
  <view class="amd-vtabs-content"
    onTouchMove="onWrapTouchMove">
    <scroll-view trap-scroll="{{true}}"
      id="amd-vtabs-content-slides-{{$id}}"
      class="amd-vtabs-content-slides amd-vtabs-content-slides-{{$id}}"
      scroll-y="{{true}}"
      scroll-top="{{wrapScrollTop}}"
      onTouchStart="onWrapTouchStart"
      onScroll="onScroll">
      <slot></slot>
    </scroll-view>
  </view>
</view>
