index.wxml 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <wxs src="../wxs/utils.wxs" module="utils" />
  2. <view class="custom-class {{ utils.bem('tabs', [type]) }}">
  3. <view style="z-index: {{ zIndex }}; {{ wrapStyle }}" class="{{ utils.bem('tabs__wrap', { scrollable }) }} {{ type === 'line' && border ? 'van-hairline--top-bottom' : '' }}">
  4. <slot name="nav-left" />
  5. <scroll-view
  6. scroll-x="{{ scrollable }}"
  7. scroll-with-animation
  8. scroll-left="{{ scrollLeft }}"
  9. class="van-tabs__scroll--{{ type }}"
  10. style="{{ color ? 'border-color: ' + color : '' }}"
  11. >
  12. <view class="{{ utils.bem('tabs__nav', [type]) }} nav-class">
  13. <view wx:if="{{ type === 'line' }}" class="van-tabs__line" style="{{ lineStyle }}" />
  14. <view
  15. wx:for="{{ tabs }}"
  16. wx:key="index"
  17. data-index="{{ index }}"
  18. class="van-ellipsis tab-class {{ index === currentIndex ? 'tab-active-class' : '' }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled }) }}"
  19. 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) + '%' : '' }}"
  20. bind:tap="onTap"
  21. >
  22. <view class="van-ellipsis" style="{{ item.titleStyle }}">
  23. {{ item.title }}
  24. <van-info
  25. wx:if="{{ item.info !== null || item.dot }}"
  26. info="{{ item.info }}"
  27. dot="{{ item.dot }}"
  28. custom-class="van-tab__title__info"
  29. />
  30. </view>
  31. </view>
  32. </view>
  33. </scroll-view>
  34. <slot name="nav-right" />
  35. </view>
  36. <view
  37. class="van-tabs__content"
  38. bind:touchstart="onTouchStart"
  39. bind:touchmove="onTouchMove"
  40. bind:touchend="onTouchEnd"
  41. bind:touchcancel="onTouchEnd"
  42. >
  43. <view class="van-tabs__track" style="{{ trackStyle }}">
  44. <slot />
  45. </view>
  46. </view>
  47. </view>