index.wxml 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. <view
  2. wx: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. bind:scroll="onScroll"
  20. scroll-left="{{ scrollLeft }}"
  21. scroll-x="{{ true }}"
  22. scroll-with-animation="{{ true }}"
  23. scroll-animation-duration="{{ 300 }}"
  24. enable-flex="true"
  25. style="{{ scrollHeight > 0 ? 'height: ' + scrollHeight + 'px;' : '' }}">
  26. <view />
  27. <block
  28. wx:for="{{ items }}"
  29. wx:for-index="index"
  30. wx:for-item="item">
  31. <view
  32. id="ant-tabs-bar-item{{ $id ? '-' + $id : '' }}-{{ index }}"
  33. class="ant-tabs-bar-wrap ant-tabs-bar-wrap-{{ type }} {{ tabsBarClassName ? tabsBarClassName : '' }}">
  34. <view
  35. wx:if="{{ type === 'basic' }}"
  36. 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 : '' }}"
  37. bind:tap="onChange"
  38. data-index="{{ index }}">
  39. <view class="ant-tabs-bar-basic-title">{{ item.title }}</view>
  40. </view>
  41. <view
  42. wx:elif="{{ type === 'capsule' }}"
  43. 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 : '' }}"
  44. bind:tap="onChange"
  45. data-index="{{ index }}">
  46. <view class="ant-tabs-bar-capsule-title">{{ item.title }}</view>
  47. </view>
  48. <view
  49. wx:else
  50. 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 : '' }}"
  51. bind:tap="onChange"
  52. data-index="{{ index }}">
  53. <view class="ant-tabs-bar-mixin-title">{{ item.title }}</view>
  54. <view class="ant-tabs-bar-mixin-subtitle">{{ item.subTitle }}</view>
  55. </view>
  56. </view>
  57. </block>
  58. <view />
  59. </scroll-view>
  60. </view>
  61. <view class="ant-tabs-content">
  62. <slot
  63. value="{{ items[mixin.value] }}"
  64. index="{{ mixin.value }}" />
  65. </view>
  66. </view>
  67. <view
  68. wx:else
  69. class="ant-vtabs {{ className ? className : '' }}"
  70. style="{{ style }}">
  71. <view class="ant-vtabs-bar {{ tabsBarClassName ? tabsBarClassName : '' }}">
  72. <scroll-view
  73. class="ant-vtabs-bar-scroll-view"
  74. id="ant-tabs-bar-scroll-view{{ $id ? '-' + $id : '' }}"
  75. bind:scroll="onScroll"
  76. scroll-top="{{ scrollTop }}"
  77. scroll-y="{{ true }}"
  78. scroll-with-animation="{{ true }}"
  79. scroll-animation-duration="{{ 300 }}"
  80. enable-flex="true">
  81. <view class="ant-vtabs-bar-item-wrap">
  82. <block
  83. wx:for="{{ items }}"
  84. wx:for-index="index"
  85. wx:for-item="item">
  86. <view
  87. id="ant-tabs-bar-item{{ $id ? '-' + $id : '' }}-{{ index }}"
  88. 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 : '' }}"
  89. style="{{ mixin.value + 1 === index ? 'border-radius: 0 16rpx 0 0' : '' }};{{ mixin.value - 1 === index ? 'border-radius: 0 0 16rpx 0' : '' }}"
  90. bind:tap="onChange"
  91. data-index="{{ index }}">
  92. <!-- display: inline -->
  93. <text class="ant-vtabs-bar-item-title">{{ item.title }}</text>
  94. </view>
  95. </block>
  96. </view>
  97. </scroll-view>
  98. </view>
  99. <view class="ant-vtabs-content">
  100. <slot
  101. value="{{ items[mixin.value] }}"
  102. index="{{ mixin.value }}">
  103. {{ items[mixin.value].content }}
  104. </slot>
  105. </view>
  106. </view>