You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
3.7 KiB
58 lines
3.7 KiB
<template name="tab-item">
|
|
<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"/>
|
|
<l-icon wx:if="{{item.icon}}"
|
|
l-class="l-class-icon l-icon-class {{item.key===activeKey ? 'l-icon-active':'l-icon-inactive'}}"
|
|
name="{{item.icon}}"
|
|
color="{{item.key===activeKey?activeColor:inactiveColor}}" size="{{item.iconSize}}"/>
|
|
{{item.tab}}
|
|
<slot wx:if="{{!item.tab}}" name="{{item.key+'.tab'}}"></slot>
|
|
</template>
|
|
|
|
|
|
<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':''}}">
|
|
<scroll-view
|
|
scroll-x="{{placement==='top'||placement==='bottom' && scrollable}}"
|
|
scroll-y="{{placement==='left'||placement==='right' && scrollable}}"
|
|
scroll-top="{{transformY}}"
|
|
scroll-left="{{transformX}}"
|
|
scroll-with-animation
|
|
class="l-tabsscroll l-class-header l-header-class {{hasLine?'l-tabs-header-line l-class-header-line l-header-line-class':''}}">
|
|
<view class="l-tabs-header">
|
|
<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}}"
|
|
style="color:{{item.key===activeKey?activeColor:inactiveColor}}"
|
|
wx:for="{{tabList}}"
|
|
wx:key="key"
|
|
data-key="{{item.key}}"
|
|
data-index="{{index}}"
|
|
mut-bind:tap="handleChange">
|
|
<l-badge data-key="{{item.key}}" data-index="{{index}}" mut-bind:lintap="handleChange" l-self-class="badge-view" l-class="l-badge-class" wx:if="{{(item.badgeCount > 0 || item.dotBadge )}}" value="{{item.badgeCount}}" dot="{{item.dotBadge}}" max-count="{{item.badgeMaxCount}}" number-type="{{item.badgeCountType}}">
|
|
<template is="tab-item" data="{{item,activeKey,activeColor,inactiveColor}}" />
|
|
</l-badge>
|
|
<template wx:else is="tab-item" data="{{item,activeKey,activeColor,inactiveColor}}" />
|
|
<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>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view wx:if="{{!swipeable}}" class="l-tabpanel-content l-class-content l-content-class"
|
|
style="{{contentHeight?'height:'+contentHeight+'rpx;':''}}{{placement==='top'||placement==='bottom' ? 'margin-left:'+ -100 *currentIndex +'%;':'transform:translate(0,'+ -100 * currentIndex +'%) translateZ(0px);'}}">
|
|
<view class="l-tabpanel l-tabpanel-class {{item.key===activeKey?'l-tabpanel-active':'l-tabpanel-inactive'}}" wx:for="{{tabList}}"
|
|
wx:key="key"
|
|
style="{{placement==='left'||placement==='right' ? 'position:absolute;width:100%;height:100%;transform:translate(0,'+ 100 * index +'%) translateZ(0px);':''}}">
|
|
<slot name="{{item.key}}"></slot>
|
|
</view>
|
|
</view>
|
|
<swiper wx:else class="l-tabpanel-content l-tabpanel-swiper l-class-content l-content-class" bindchange="swiperChange"
|
|
style="{{contentHeight?'height:'+contentHeight+'rpx;':''}}"
|
|
current="{{currentIndex}}" vertical="{{placement==='left'||placement==='right'}}">
|
|
<swiper-item class="l-tabpanel l-tabpanel-class {{item.key===activeKey?'l-tabpanel-active':''}}" wx:for="{{tabList}}" wx:key="key">
|
|
<slot name="{{item.key}}"></slot>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|