E_WeChat/miniprogram_npm/tdesign-miniprogram/tabs/tabs.wxml

<import src="../common/template/badge.wxml" />
<import src="../common/template/icon.wxml" />
<wxs src="./tabs.wxs" module="filters" />
<wxs src="../common/utils.wxs" module="_" />

<view style="{{_._style([style, customStyle])}}" class="{{_.cls(classPrefix, [placement])}} {{prefix}}-class">
  <t-sticky
    t-class="{{_.cls(classPrefix + '__sticky', [placement])}}"
    disabled="{{ !sticky }}"
    z-index="{{ stickyProps.zIndex || '1' }}"
    offset-top="{{ stickyProps.offsetTop || 0 }}"
    container="{{ stickyProps.container }}"
    bind:scroll="onTouchScroll"
  >
    <view class="{{_.cls(classPrefix + '__wrapper', [theme])}}">
      <scroll-view
        class="{{_.cls(classPrefix + '__scroll', [placement])}}"
        enable-flex
        scroll-left="{{offset}}"
        scroll-x="{{isScrollX}}"
        scroll-y="{{isScrollY}}"
        scroll-with-animation
      >
        <view class="{{_.cls(classPrefix + '__nav', [placement])}}" aria-role="tablist">
          <view
            wx:for="{{tabs}}"
            wx:key="index"
            data-index="{{index}}"
            class="{{_.cls(classPrefix + '__item', [theme, ['evenly', spaceEvenly], placement, ['disabled', item.disabled], ['active', currentIndex === index]])}} {{currentIndex === index ? prefix + '-class-active' : ''}} {{prefix}}-class-item"
            bind:tap="onTabTap"
            aria-role="tab"
            aria-controls="{{tabID + '_panel_' + index}}"
            aria-selected="{{currentIndex === index}}"
            aria-disabled="{{item.disabled}}"
          >
            <view class="{{_.cls(classPrefix + '__item-inner', [theme, ['active', currentIndex === index]])}}">
              <template wx:if="{{item.icon}}" is="icon" data="{{ class: classPrefix + '__icon', ...item.icon }}" />
              <block wx:if="{{item.badgeProps}}">
                <template is="badge" data="{{ ...item.badgeProps, content: item.label }}" />
              </block>
              <block wx:else>{{item.label}}</block>
            </view>
            <view wx:if="{{theme == 'card' && currentIndex - 1 == index}}" class="{{classPrefix}}__item-prefix" />
            <view wx:if="{{theme == 'card' && currentIndex + 1 == index}}" class="{{classPrefix}}__item-suffix" />
          </view>
          <view
            wx:if="{{theme == 'line' && showBottomLine}}"
            class="{{_.cls(classPrefix + '__track', [placement])}} {{prefix}}-class-track"
            style="{{trackStyle}}"
          />
        </view>
      </scroll-view>
    </view>
  </t-sticky>
  <view
    class="{{_.cls(classPrefix + '__content', [['animated', animation]])}}"
    bind:touchstart="onTouchStart"
    bind:touchmove="onTouchMove"
    bind:touchend="onTouchEnd"
    bind:touchcancel="onTouchEnd"
  >
    <view
      class="{{classPrefix}}__content-inner"
      style="{{ filters.animate({duration: animation.duration, currentIndex:currentIndex, direction}) }}"
    >
      <slot />
    </view>
  </view>
</view>