index.wxml 2.13 KB
<wxs src="../wxs/utils.wxs" module="utils" />

<view class="custom-class {{ utils.bem('tabs', [type]) }}">
  <van-sticky disabled="{{ !sticky }}" z-index="{{ zIndex }}" offset-top="{{ offsetTop }}">
    <view class="{{ utils.bem('tabs__wrap', { scrollable }) }} {{ type === 'line' && border ? 'van-hairline--top-bottom' : '' }}">
      <slot name="nav-left" />

      <scroll-view
        scroll-x="{{ scrollable }}"
        scroll-with-animation
        scroll-left="{{ scrollLeft }}"
        class="{{ utils.bem('tabs__scroll', [type]) }}"
        style="{{ color ? 'border-color: ' + color : '' }}"
      >
        <view class="{{ utils.bem('tabs__nav', [type]) }} nav-class">
          <view wx:if="{{ type === 'line' }}" class="van-tabs__line" style="{{ lineStyle }}" />
          <view
            wx:for="{{ tabs }}"
            wx:key="index"
            data-index="{{ index }}"
            class="van-ellipsis tab-class {{ index === currentIndex ? 'tab-active-class' : '' }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled }) }}"
            style="{{ color && index !== currentIndex && type === 'card' && !item.disabled ? 'color: ' + color : '' }} {{ color && index === currentIndex && type === 'card' ? ';background-color:' + color : '' }} {{ color ? ';border-color: ' + color : '' }} {{ scrollable ? ';flex-basis:' + (88 / swipeThreshold) + '%' : '' }}"
            bind:tap="onTap"
          >
            <view class="van-ellipsis" style="{{ item.titleStyle }}">
              {{ item.title }}
              <van-info
                wx:if="{{ item.info !== null || item.dot }}"
                info="{{ item.info }}"
                dot="{{ item.dot }}"
                custom-class="van-tab__title__info"
              />
            </view>
          </view>
        </view>
      </scroll-view>

      <slot name="nav-right" />
    </view>
  </van-sticky>

  <view
    class="van-tabs__content"
    bind:touchstart="onTouchStart"
    bind:touchmove="onTouchMove"
    bind:touchend="onTouchEnd"
    bind:touchcancel="onTouchEnd"
  >
    <view class="van-tabs__track" style="{{ trackStyle }}">
      <slot />
    </view>
  </view>
</view>