61 lines
2.4 KiB
XML
61 lines
2.4 KiB
XML
<import-sjs name="util" from="./util.sjs"/>
|
|
<view class="am-tabs {{className}}">
|
|
<view class="am-tabs-tab-bar-wrap">
|
|
<view class="am-tabs-bar">
|
|
<view class="am-tabs-bar-content-wrap">
|
|
<view class="am-tabs-scroll-left"></view>
|
|
<view class="am-tabs-scroll-right"></view>
|
|
<scroll-view
|
|
scroll-left="{{util.calcScrollLeft(windowWidth, tabWidth, activeTab)}}"
|
|
scroll-x="{{true}}"
|
|
scroll-with-animation="{{animation}}"
|
|
class="am-tabs-bar-content">
|
|
<block a:for="{{tabs}}">
|
|
<view
|
|
data-index="{{index}}"
|
|
key="tabs-item-{{index}}"
|
|
onTap="handleTabClick"
|
|
style="{{
|
|
backgroundColor: tabBarBackgroundColor,
|
|
color: index === activeTab ? tabBarActiveTextColor: tabBarInactiveTextColor,
|
|
width: (tabs.length > 3 ? 0.25 : 1 / tabs.length) * 100 + '%',
|
|
}}"
|
|
class="am-tabs-bar-tab {{tabBarCls}}">
|
|
<view class="am-tabs-bar-title {{ index === activeTab ? activeCls : '' }}" style="{{ borderBottomColor: index === activeTab ? tabBarUnderlineColor : '' }}">
|
|
<text>{{item.title}}</text>
|
|
<badge
|
|
className="am-tabs-bar-badge {{item.badgeType ? item.badgeType : ''}}"
|
|
a:if="{{item.badgeType}}"
|
|
dot="{{item.badgeType == 'dot'}}"
|
|
text="{{item.badgeText}}" />
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="am-tabs-plus-wrap {{showPlus ? 'show' : ''}}">
|
|
<view class="am-tabs-plus" onTap="handlePlusClick"></view>
|
|
</view>
|
|
</view>
|
|
<block a:if="{{swipeable}}">
|
|
<swiper
|
|
circular="{{false}}"
|
|
current="{{activeTab}}"
|
|
interval="99999999"
|
|
autoplay="{{autoplay}}"
|
|
duration="{{duration}}"
|
|
onChange="handleSwiperChange"
|
|
class="am-tabs-content-wrap {{util.compareVersion(version) < 0 ? 'fix' : ''}}">
|
|
<slot></slot>
|
|
</swiper>
|
|
</block>
|
|
<block a:else>
|
|
<view class="am-tabs-content-wrap {{util.compareVersion(version) >= 0 ? 'fix' : ''}}">
|
|
<view class="am-tabs-slides" style="{{ transform: 'translate3d(' +(-activeTab * 100) + 'vw, 0, 0)' }}">
|
|
<slot></slot>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|