index.wxml 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <wxs src="../wxs/utils.wxs" module="utils" />
  2. <wxs src="./index.wxs" module="computed" />
  3. <view class="custom-class {{ utils.bem('tabs') }}">
  4. <van-sticky
  5. disabled="{{ !sticky }}"
  6. z-index="{{ zIndex }}"
  7. offset-top="{{ offsetTop }}"
  8. container="{{ container }}"
  9. bind:scroll="onTouchScroll"
  10. >
  11. <view class="{{ utils.bem('tabs--') + type }} {{ utils.bem('tabs__wrap', { scrollable }) }} {{ type === 'line' && border ? 'van-hairline--top-bottom' : '' }} wrap-class">
  12. <slot name="nav-left" />
  13. <scroll-view
  14. enhanced="{{ true }}" show-scrollbar="{{ false }}"
  15. scroll-x="{{ scrollable }}"
  16. scroll-with-animation="{{ scrollWithAnimation }}"
  17. scroll-left="{{ scrollLeft }}"
  18. class="{{ utils.bem('tabs__scroll', [type]) }}"
  19. style="{{ color ? 'border-color: ' + color : '' }}"
  20. >
  21. <view class="{{ utils.bem('tabs__nav', [type, { complete: !ellipsis }]) }} nav-class" style="{{ computed.navStyle(color, type) }}">
  22. <view wx:if="{{ type === 'line' }}" class="van-tabs__line" style="{{ computed.lineStyle({ color, lineOffsetLeft, lineHeight, skipTransition, duration, lineWidth, inited }) }}" />
  23. <view
  24. wx:for="{{ tabs }}"
  25. wx:key="index"
  26. data-index="{{ index }}"
  27. class="{{ computed.tabClass(index === currentIndex, ellipsis) }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled, complete: !ellipsis }) }}"
  28. style="{{ computed.tabStyle({ active: index === currentIndex, ellipsis, color, type, disabled: item.disabled, titleActiveColor, titleInactiveColor, swipeThreshold, scrollable }) }}"
  29. bind:tap="onTap"
  30. >
  31. <view class="{{ ellipsis ? 'van-ellipsis' : '' }}" style="{{ item.titleStyle }}">
  32. {{ item.title }}
  33. <van-info
  34. wx:if="{{ item.info !== null || item.dot }}"
  35. info="{{ item.info }}"
  36. dot="{{ item.dot }}"
  37. custom-class="van-tab__title__info"
  38. />
  39. </view>
  40. </view>
  41. </view>
  42. </scroll-view>
  43. <slot name="nav-right" />
  44. </view>
  45. </van-sticky>
  46. <view
  47. class="van-tabs__content"
  48. bind:touchstart="onTouchStart"
  49. bind:touchmove="onTouchMove"
  50. bind:touchend="onTouchEnd"
  51. bind:touchcancel="onTouchEnd"
  52. >
  53. <view
  54. class="{{ utils.bem('tabs__track', [{ animated }]) }} van-tabs__track"
  55. style="{{ computed.trackStyle({ duration, currentIndex, animated }) }}"
  56. >
  57. <slot />
  58. </view>
  59. </view>
  60. </view>