tabs.wxml 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <wxs src="./tabs.wxs" module="filters" />
  2. <view class="{{classPrefix}} {{classPrefix}}--{{placement}} {{prefix}}-class">
  3. <t-sticky
  4. t-class="{{classPrefix}}__sticky {{classPrefix}}__sticky--{{placement}}"
  5. disabled="{{ !sticky }}"
  6. z-index="{{ stickyProps.zIndex || '1' }}"
  7. offset-top="{{ stickyProps.offsetTop }}"
  8. container="{{ stickyProps.container }}"
  9. bind:scroll="onTouchScroll"
  10. >
  11. <view class="{{classPrefix}}__wrapper">
  12. <scroll-view
  13. class="{{classPrefix}}__scroll {{classPrefix}}__scroll--{{placement}}"
  14. enable-flex
  15. scroll-left="{{offset}}"
  16. scroll-x="{{isScrollX}}"
  17. scroll-y="{{isScrollY}}"
  18. scroll-with-animation
  19. >
  20. <view class="{{classPrefix}}__nav {{classPrefix}}__nav--{{placement}}">
  21. <view
  22. wx:for="{{tabs}}"
  23. wx:key="index"
  24. data-index="{{index}}"
  25. class="{{classPrefix}}__item {{classPrefix}}__item--{{placement}} {{prefix}}-class-item {{item.disabled ? (prefix + '-is-disabled') : '' }} {{currentIndex === index ? prefix + '-is-active ' + prefix + '-class-active' : ''}}"
  26. bind:tap="onTabTap"
  27. >
  28. {{item.label}}
  29. </view>
  30. <view
  31. class="{{classPrefix}}__track {{classPrefix}}__track--{{placement}} {{prefix}}-class-track"
  32. style="{{trackStyle}}"
  33. />
  34. </view>
  35. </scroll-view>
  36. </view>
  37. </t-sticky>
  38. <view
  39. class="{{classPrefix}}__content"
  40. bind:touchstart="onTouchStart"
  41. bind:touchmove="onTouchMove"
  42. bind:touchend="onTouchEnd"
  43. bind:touchcancel="onTouchEnd"
  44. >
  45. <view
  46. class="{{classPrefix}}__content-inner "
  47. style="{{ filters.animate({duration: animate.duration,currentIndex:currentIndex, direction}) }}"
  48. >
  49. <slot />
  50. </view>
  51. </view>
  52. </view>