tabs.wxml 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <import src="../common/template/badge.wxml" />
  2. <import src="../common/template/icon.wxml" />
  3. <wxs src="./tabs.wxs" module="filters" />
  4. <wxs src="../common/utils.wxs" module="_" />
  5. <view style="{{_._style([style, customStyle])}}" class="{{_.cls(classPrefix, [placement])}} class {{prefix}}-class">
  6. <t-sticky
  7. t-class="{{_.cls(classPrefix + '__sticky', [placement])}}"
  8. disabled="{{ !sticky }}"
  9. z-index="{{ stickyProps.zIndex || '1' }}"
  10. offset-top="{{ stickyProps.offsetTop || 0 }}"
  11. container="{{ stickyProps.container }}"
  12. bind:scroll="onTouchScroll"
  13. >
  14. <view class="{{_.cls(classPrefix + '__wrapper', [theme])}}">
  15. <scroll-view
  16. class="{{_.cls(classPrefix + '__scroll', [placement])}}"
  17. enhanced
  18. enable-flex
  19. scroll-left="{{offset}}"
  20. scroll-x="{{isScrollX}}"
  21. scroll-y="{{isScrollY}}"
  22. scroll-with-animation
  23. show-scrollbar="{{false}}"
  24. >
  25. <view class="{{_.cls(classPrefix + '__nav', [placement])}}" aria-role="tablist">
  26. <view
  27. wx:for="{{tabs}}"
  28. wx:key="index"
  29. data-index="{{index}}"
  30. class="{{_.cls(classPrefix + '__item', [theme, ['evenly', spaceEvenly], placement, ['disabled', item.disabled], ['active', currentIndex === index]])}} {{currentIndex === index ? prefix + '-class-active' : ''}} {{prefix}}-class-item"
  31. bind:tap="onTabTap"
  32. aria-role="tab"
  33. aria-controls="{{tabID + '_panel_' + index}}"
  34. aria-selected="{{currentIndex === index}}"
  35. aria-disabled="{{item.disabled}}"
  36. aria-label="{{ ariaLabel || (item.badgeProps.dot || item.badgeProps.count ? item.label + _.getBadgeAriaLabel({ ...item.badgeProps }) : '') }}"
  37. >
  38. <view
  39. class="{{_.cls(classPrefix + '__item-inner', [theme, ['active', currentIndex === index]])}}"
  40. aria-hidden="{{ item.badgeProps.dot || item.badgeProps.count }}"
  41. >
  42. <template wx:if="{{item.icon}}" is="icon" data="{{ class: classPrefix + '__icon', ...item.icon }}" />
  43. <block wx:if="{{item.badgeProps}}">
  44. <template is="badge" data="{{ ...item.badgeProps, content: item.label }}" />
  45. </block>
  46. <block wx:else>{{item.label}}</block>
  47. </view>
  48. <view wx:if="{{theme == 'card' && currentIndex - 1 == index}}" class="{{classPrefix}}__item-prefix" />
  49. <view wx:if="{{theme == 'card' && currentIndex + 1 == index}}" class="{{classPrefix}}__item-suffix" />
  50. </view>
  51. <view
  52. wx:if="{{theme == 'line' && showBottomLine}}"
  53. class="{{_.cls(classPrefix + '__track', [placement])}} {{prefix}}-class-track"
  54. style="{{trackStyle}}"
  55. />
  56. </view>
  57. </scroll-view>
  58. </view>
  59. </t-sticky>
  60. <view
  61. class="{{_.cls(classPrefix + '__content', [['animated', animation]])}}"
  62. bind:touchstart="onTouchStart"
  63. bind:touchmove="onTouchMove"
  64. bind:touchend="onTouchEnd"
  65. bind:touchcancel="onTouchEnd"
  66. >
  67. <view
  68. class="{{classPrefix}}__content-inner"
  69. style="{{ filters.animate({duration: animation.duration, currentIndex:currentIndex, direction}) }}"
  70. >
  71. <slot />
  72. </view>
  73. </view>
  74. </view>