index.axml 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <view
  2. a:if="{{ direction !== 'vertical' }}"
  3. class="ant-tabs {{ className ? className : '' }}"
  4. style="{{ style }}">
  5. <view
  6. class="ant-tabs-bar {{ type === 'basic' ? 'ant-tabs-bar-underline' : '' }} {{ tabsBarClassName ? tabsBarClassName : '' }}">
  7. <view class="ant-tabs-bar-plus">
  8. <slot name="plus" />
  9. </view>
  10. <view
  11. class="ant-tabs-bar-fade ant-tabs-bar-fade-left"
  12. style="opacity: {{ leftFade ? '1' : '0' }}" />
  13. <view
  14. class="ant-tabs-bar-fade ant-tabs-bar-fade-right"
  15. style="opacity: {{ rightFade ? '1' : '0' }}" />
  16. <scroll-view
  17. class="ant-tabs-bar-scroll-view"
  18. id="ant-tabs-bar-scroll-view{{ $id ? '-' + $id : '' }}"
  19. onScroll="onScroll"
  20. scroll-left="{{ scrollLeft }}"
  21. scroll-x="{{ true }}"
  22. scroll-with-animation="{{ true }}"
  23. scroll-animation-duration="{{ 300 }}">
  24. <view />
  25. <block
  26. a:for="{{ items }}"
  27. a:for-index="index"
  28. a:for-item="item">
  29. <view
  30. id="ant-tabs-bar-item{{ $id ? '-' + $id : '' }}-{{ index }}"
  31. class="ant-tabs-bar-wrap ant-tabs-bar-wrap-{{ type }} {{ tabsBarClassName ? tabsBarClassName : '' }}">
  32. <view
  33. a:if="{{ type === 'basic' }}"
  34. class="ant-tabs-bar-item ant-tabs-bar-basic {{ tabClassName ? tabClassName : '' }} {{ mixin.value === index && !item.disabled ? 'ant-tabs-bar-active' : '' }} {{ item.disabled ? 'ant-tabs-bar-disabled' : '' }} {{ mixin.value === index && !item.disabled && tabActiveClassName ? tabActiveClassName : '' }}"
  35. onTap="onChange"
  36. data-index="{{ index }}">
  37. <view class="ant-tabs-bar-basic-title">
  38. <slot
  39. name="title"
  40. value="{{ item }}"
  41. index="{{ index }}">
  42. {{ item.title }}
  43. </slot>
  44. </view>
  45. </view>
  46. <view
  47. a:elif="{{ type === 'capsule' }}"
  48. class="ant-tabs-bar-item ant-tabs-bar-capsule {{ tabClassName ? tabClassName : '' }} {{ mixin.value === index && !item.disabled ? 'ant-tabs-bar-active' : '' }} {{ item.disabled ? 'ant-tabs-bar-disabled' : '' }} {{ mixin.value === index && !item.disabled && tabActiveClassName ? tabActiveClassName : '' }}"
  49. onTap="onChange"
  50. data-index="{{ index }}">
  51. <view class="ant-tabs-bar-capsule-title">
  52. <slot
  53. name="title"
  54. value="{{ item }}"
  55. index="{{ index }}">
  56. {{ item.title }}
  57. </slot>
  58. </view>
  59. </view>
  60. <view
  61. a:else
  62. class="ant-tabs-bar-item ant-tabs-bar-mixin {{ tabClassName ? tabClassName : '' }} {{ mixin.value === index && !item.disabled ? 'ant-tabs-bar-active' : '' }} {{ item.disabled ? 'ant-tabs-bar-disabled' : '' }} {{ mixin.value === index && !item.disabled && tabActiveClassName ? tabActiveClassName : '' }}"
  63. onTap="onChange"
  64. data-index="{{ index }}">
  65. <view class="ant-tabs-bar-mixin-title">
  66. <slot
  67. name="title"
  68. value="{{ item }}"
  69. index="{{ index }}">
  70. {{ item.title }}
  71. </slot>
  72. </view>
  73. <view class="ant-tabs-bar-mixin-subtitle">
  74. <slot
  75. name="subTitle"
  76. value="{{ item }}"
  77. index="{{ index }}">
  78. {{ item.subTitle }}
  79. </slot>
  80. </view>
  81. </view>
  82. </view>
  83. </block>
  84. <view />
  85. </scroll-view>
  86. </view>
  87. <view class="ant-tabs-content">
  88. <slot
  89. value="{{ items[mixin.value] }}"
  90. index="{{ mixin.value }}" />
  91. </view>
  92. </view>
  93. <view
  94. a:else
  95. class="ant-vtabs {{ className ? className : '' }}"
  96. style="{{ style }}">
  97. <view class="ant-vtabs-bar {{ tabsBarClassName ? tabsBarClassName : '' }}">
  98. <scroll-view
  99. class="ant-vtabs-bar-scroll-view"
  100. id="ant-tabs-bar-scroll-view{{ $id ? '-' + $id : '' }}"
  101. onScroll="onScroll"
  102. scroll-top="{{ scrollTop }}"
  103. scroll-y="{{ true }}"
  104. scroll-with-animation="{{ true }}"
  105. scroll-animation-duration="{{ 300 }}">
  106. <view class="ant-vtabs-bar-item-wrap">
  107. <block
  108. a:for="{{ items }}"
  109. a:for-index="index"
  110. a:for-item="item">
  111. <view
  112. id="ant-tabs-bar-item{{ $id ? '-' + $id : '' }}-{{ index }}"
  113. class="ant-vtabs-bar-item {{ tabClassName ? tabClassName : '' }} {{ mixin.value === index && !item.disabled ? 'ant-vtabs-bar-item-active' : '' }} {{ item.disabled ? 'ant-vtabs-bar-item-disabled' : '' }} {{ mixin.value === index && !item.disabled && tabActiveClassName ? tabActiveClassName : '' }}"
  114. style="{{ mixin.value + 1 === index ? 'border-radius: 0 16rpx 0 0' : '' }};{{ mixin.value - 1 === index ? 'border-radius: 0 0 16rpx 0' : '' }}"
  115. onTap="onChange"
  116. data-index="{{ index }}">
  117. <!-- display: inline -->
  118. <text class="ant-vtabs-bar-item-title"
  119. ><slot
  120. name="title"
  121. value="{{ item }}"
  122. index="{{ index }}">
  123. {{ item.title }}
  124. </slot></text
  125. >
  126. </view>
  127. </block>
  128. </view>
  129. </scroll-view>
  130. </view>
  131. <view class="ant-vtabs-content">
  132. <slot
  133. value="{{ items[mixin.value] }}"
  134. index="{{ mixin.value }}">
  135. {{ items[mixin.value].content }}
  136. </slot>
  137. </view>
  138. </view>