104 lines
4.5 KiB
XML
104 lines
4.5 KiB
XML
<view a:if="{{direction !== 'vertical'}}" class="ant-tabs {{className ? className : ''}}" style="{{style}}">
|
|
<view class="ant-tabs-bar {{type === 'basic'?'ant-tabs-bar-underline':''}} {{tabsBarClassName ? tabsBarClassName : ''}}">
|
|
<view class="ant-tabs-bar-plus">
|
|
<slot name="plus" value="{{item}}" index="{{index}}" />
|
|
</view>
|
|
<view class="ant-tabs-bar-fade ant-tabs-bar-fade-left"
|
|
style="opacity: {{leftFade ? '1' : '0'}}" />
|
|
<view class="ant-tabs-bar-fade ant-tabs-bar-fade-right"
|
|
style="opacity: {{rightFade ? '1' : '0'}}" />
|
|
<scroll-view class="ant-tabs-bar-scroll-view"
|
|
id="ant-tabs-bar-scroll-view-{{$id}}"
|
|
onScroll="onScroll"
|
|
scroll-left="{{scrollLeft}}"
|
|
scroll-x="{{true}}"
|
|
scroll-with-animation="{{true}}"
|
|
scroll-animation-duration="{{300}}"
|
|
>
|
|
<view></view>
|
|
<view a:for="{{items}}" id="ant-tabs-bar-item-{{$id}}-{{index}}" class="ant-tabs-bar-wrap {{`ant-tabs-bar-wrap-${type}`}} {{tabsBarClassName ? tabsBarClassName: ''}}">
|
|
<!-- basic 基础类型 -->
|
|
<view
|
|
a:if="{{type === 'basic'}}"
|
|
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:''}}"
|
|
|
|
onTap="onChange"
|
|
data-index="{{index}}">
|
|
<view class="ant-tabs-bar-basic-title">
|
|
<slot name="title" value="{{item}}" index="{{index}}">
|
|
{{item.title}}
|
|
</slot>
|
|
</view>
|
|
</view>
|
|
<!-- capsule 胶囊类型 -->
|
|
<view
|
|
a:elif="{{type === 'capsule'}}"
|
|
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:''}}"
|
|
|
|
onTap="onChange"
|
|
data-index="{{index}}">
|
|
<view class="ant-tabs-bar-capsule-title">
|
|
<slot name="title" value="{{item}}" index="{{index}}">
|
|
{{item.title}}
|
|
</slot>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- mixin 混合类型 -->
|
|
<view
|
|
a:else
|
|
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:''}}"
|
|
|
|
onTap="onChange"
|
|
data-index="{{index}}">
|
|
<view class="ant-tabs-bar-mixin-title">
|
|
<slot name="title" value="{{item}}" index="{{index}}">
|
|
{{item.title}}
|
|
</slot>
|
|
</view>
|
|
<view class="ant-tabs-bar-mixin-subtitle">
|
|
<slot name="subTitle" value="{{item}}" index="{{index}}">
|
|
{{item.subTitle}}
|
|
</slot>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view></view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="ant-tabs-content">
|
|
<slot value="{{items[mixin.value]}}" index="{{mixin.value}}">
|
|
|
|
</slot>
|
|
</view>
|
|
</view>
|
|
<view a:else class="ant-vtabs {{className ? className : ''}}" style="{{style}}">
|
|
<view class="ant-vtabs-bar {{tabsBarClassName ? tabsBarClassName : ''}}">
|
|
<scroll-view class="ant-vtabs-bar-scroll-view"
|
|
scroll-top="{{tabTop}}"
|
|
scroll-y="{{true}}">
|
|
<view class="ant-vtabs-bar-item-wrap">
|
|
<view
|
|
a:for="{{items}}"
|
|
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 : ''}}"
|
|
style="{{`${mixin.value + 1 === index ? 'border-radius: 0 16rpx 0 0': ''};${mixin.value - 1 === index ? 'border-radius: 0 0 16rpx 0': ''}`}}"
|
|
onTap="onChange"
|
|
data-index="{{index}}"
|
|
>
|
|
<text class="ant-vtabs-bar-item-title">
|
|
<slot name="title" value="{{item}}" index="{{index}}">
|
|
{{item.title}}
|
|
</slot>
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="ant-vtabs-content">
|
|
<slot value="{{items[mixin.value]}}" index="{{mixin.value}}">
|
|
{{items[mixin.value].content}}
|
|
</slot>
|
|
</view>
|
|
</view>
|
|
|