index.wxml 4.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <!-- components/tabs/index.wxml -->
  2. <view class="l-tabs l-placement-top l-tabs-horizontal {{aminmated ? 'l-aminmated' :''}} {{scrollable ? 'l-tabs-scroll':''}}">
  3. <template is="tab-header" data="{{tab:tabList,placemanet,scrollable,transformY,transformX,activeKey,hasLine,activeColor,inactiveColor,headerType:'tab'}}"></template>
  4. <view class="l-tabs l-sub-placement-left l-tabs-vertical {{aminmated ? 'l-aminmated' :''}} {{scrollable ? 'l-tabs-scroll':''}}">
  5. <template is="tab-header" wx:if="{{tabList[currentIndex].subTabs.length}}" data="{{tab:tabList[currentIndex].subTabs,placemanet,scrollable,transformY,transformX,activeKey:tabList[currentIndex].activeSubKey,hasLine,activeColor,inactiveColor,headerType:'subTab'}}"></template>
  6. <view class="l-tabs-main">
  7. <view wx:if="{{!swipeable}}" class="l-tabpanel-content">
  8. <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);':''}}">
  9. <view class="l-subpanel-content" wx:if="{{item.subTabs.length>0}}" style="{{'transform:translate(0,'+ -100 * item.subCurrentIndex +'%) translateZ(0px);'}}">
  10. <view class="l-subpanel" wx:for="{{item.subTabs}}" wx:for-item="tab" wx:key="{{tab.key}}">
  11. <slot name="{{tab.key}}"></slot>
  12. </view>
  13. </view>
  14. <slot name="{{item.key}}" wx:else></slot>
  15. </view>
  16. </view>
  17. <swiper wx:else class="l-tabpanel-content" bindchange="swiperChange" current="{{currentIndex}}">
  18. <swiper-item class="l-tabpanel {{item.key===activeKey?'l-tabpanel-active':''}}" wx:for="{{tabList}}" wx:key="{{item.key}}">
  19. <view wx:if="{{item.subTabs.length>0}}">
  20. <swiper class="" vertical bindchange="subSwiperChange" current="{{item.subCurrentIndex}}" >
  21. <swiper-item wx:for="{{item.subTabs}}" wx:for-item="tab" wx:key="{{tab.key}}">
  22. <slot name="{{tab.key}}"></slot>
  23. </swiper-item>
  24. </swiper>
  25. </view>
  26. <slot name="{{item.key}}" wx:else></slot>
  27. </swiper-item>
  28. </swiper>
  29. </view>
  30. </view>
  31. </view>
  32. <template name="tab-header">
  33. <scroll-view scroll-x="{{headerType==='tab' && scrollable}}" scroll-y="{{headerType==='subTab' && scrollable}}" scroll-top="{{transformY}}" scroll-left="{{transformX}}" scroll-with-animation class="l-tabsscroll">
  34. <view class="l-tabs-header l-class-header l-header-class {{hasLine?'l-tabs-header-line':''}}">
  35. <view id="{{item.key}}" class="l-tabs-item {{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.image.placement}}" style="color:{{item.key===activeKey?activeColor:inactiveColor}}" wx:for="{{tab}}" wx:key="{{item.key}}" data-key="{{item.key}}" data-index="{{index}}" data-header-type="{{headerType}}" bind:tap="handleChange">
  36. <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" />
  37. <l-icon wx:if="{{item.icon}}" l-class="{{item.key===activeKey ? 'l-icon-active':'l-icon-inactive'}}" name="{{item.icon}}" size="28" color="{{item.key===activeKey?activeColor:inactiveColor}}" />
  38. {{item.tab}}
  39. <view class="l-tab-line l-class-line l-line-class" wx:if="{{hasLine && item.key===activeKey}}" style="background:{{item.key===activeKey?activeColor:inactiveColor}}"></view>
  40. </view>
  41. </view>
  42. </scroll-view>
  43. </template>