index.axml 5.0 KB

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