index.wxml 3.1 KB

1234567891011121314151617181920212223242526272829303132333435
  1. <!-- components/tabs/index.wxml -->
  2. <view class="l-tabs l-class-tabs l-tabs-class {{'l-placement-'+placement}} {{animated ? 'l-aminmated' :''}} {{placement=='left'||placement=='right'?'l-tabs-vertical':'l-tabs-horizontal'}} {{scrollable ? 'l-tabs-scroll':''}}">
  3. <scroll-view
  4. scroll-x="{{placement=='top'||placement=='bottom' && scrollable}}"
  5. scroll-y="{{placement=='left'||placement=='right' && scrollable}}"
  6. scroll-top="{{transformY}}"
  7. scroll-left="{{transformX}}"
  8. scroll-with-animation
  9. class="l-tabsscroll l-class-header l-header-class {{hasLine?'l-tabs-header-line l-class-header-line l-header-line-class':''}}">
  10. <view class="l-tabs-header">
  11. <view class="l-tabs-item {{equalWidth?'l-tabs-equal-width':'l-tabs-unequal-width'}} {{item.key===activeKey ?'l-class-active l-active-class l-tabs-active':'l-class-inactive l-inactive-class l-tabs-inactive'}} {{'l-tab-image-placement-'+item.picPlacement}}"
  12. style="color:{{item.key===activeKey?activeColor:inactiveColor}}"
  13. wx:for="{{tabList}}"
  14. wx:key="{{item.key}}"
  15. data-key="{{item.key}}"
  16. data-index="{{index}}"
  17. bind:tap="handleChange">
  18. <image wx:if="{{ item.image.activeImage || item.image.defaultImage }}" src="{{item.key===activeKey? item.image.activeImage:item.image.defaultImage}}" class="l-tab-image l-class-tabimage l-tabimage-class"/>
  19. <l-icon wx:if="{{item.icon}}" l-class="l-class-icon l-icon-class" l-self-class="{{item.key===activeKey ? 'l-icon-active':'l-icon-inactive'}}" name="{{item.icon}}" color="{{item.key===activeKey?activeColor:inactiveColor}}" size="{{item.iconSize}}"/>
  20. {{item.tab}}
  21. <view class="l-tab-line {{item.key===activeKey?'l-class-line l-line-class':''}} {{animatedForLine?'l-line-aminmated':''}}" wx:if="{{hasLine}}" style="background:{{item.key===activeKey?activeColor:inactiveColor}}"></view>
  22. </view>
  23. </view>
  24. </scroll-view>
  25. <view wx:if="{{!swipeable}}" class="l-tabpanel-content l-class-content l-content-class" style="{{placement=='top'||placement=='bottom' ? 'margin-left:'+ -100 *currentIndex +'%;':'transform:translate(0,'+ -100 * currentIndex +'%) translateZ(0px);'}}">
  26. <view class="l-tabpanel {{item.key===activeKey?'l-tabpanel-active':'l-tabpanel-inactive'}}" wx:for="{{tabList}}" wx:key="{{item.key}}" style="{{placement=='left'||placement=='right' ? 'position:absolute;width:100%;height:100%;transform:translate(0,'+ 100 * index +'%) translateZ(0px);':''}}">
  27. <slot name="{{item.key}}"></slot>
  28. </view>
  29. </view>
  30. <swiper wx:else class="l-tabpanel-content l-tabpanel-swiper l-class-content l-content-class" bindchange="swiperChange" current="{{currentIndex}}" vertical="{{placement=='left'||placement=='right'}}">
  31. <swiper-item class="l-tabpanel {{item.key===activeKey?'l-tabpanel-active':''}}" wx:for="{{tabList}}" wx:key="{{item.key}}">
  32. <slot name="{{item.key}}"></slot>
  33. </swiper-item>
  34. </swiper>
  35. </view>