<view class="wv-vtabpanel tabbar-{{tabbarPosition}} {{customClass}}" style="{{contentBackground ? 'background: ' + contentBackground + ';' : ''}} {{gap ? 'gap: ' + gap + ';' : ''}} {{background ? 'background: ' + background + ';' : ''}} {{height ? 'height: ' + height + ';' : ''}};">
  <slot name="vtabpanel-vtabbar"></slot>

  <view class="wv-vtabpanel-content-wrapper" style=" {{contentBorderRadius ? 'border-radius: ' + contentBorderRadius + ';' : ''}} {{contentWidth ? 'width: ' + contentWidth + '; flex: unset;' : ''}}">
    <scroll-view 
      wx:if="{{contentsMode === 'continuous'}}"
      bindscroll="onContainerScroll"
      class="wv-vtabpanel-container continuous-mode"
      scroll-y="{{true}}"
      scroll-with-animation="{{true}}"
      scroll-top="{{containerScrollTop}}">
      <slot name="vtabpanel-contents"></slot>
    </scroll-view>
    
    <view wx:else class="wv-vtabpanel-container independent-mode"
          bindtouchstart="onTouchStart"
          catch:touchmove="onTouchMove"
          bindtouchend="onTouchEnd">
      <slot name="vtabpanel-contents"></slot>
    </view>
  </view>
    
  <view wx:if="{{contentIndicatorDots}}" class="wv-vtabpanel-indicator-dots">
    <block wx:for="{{contentItemCount}}" wx:key="index">
      <view 
        class="wv-vtabpanel-indicator-item {{index === currentIndex ? 'active' : ''}} {{contentIndicatorActiveStyle}}" 
        style="background-color: {{index === currentIndex ? contentIndicatorActiveColor : contentIndicatorColor}}">
      </view>
    </block>
  </view>
</view>
