<view class="tabs-container {{className}}">
    <block s-if="type === 'flex'">
        <view
            class="tabs-nav tabs-nav-flex {{mode === 'fixed' ? 'tabs-nav-fixed' : ''}} zw-tabs-nav-class"
            style="width:{{navBarWidth}}"
        >
            <view
                class="nav-item {{navItemClassName}} {{index === currentIndex && (transitionFlag || initFinished) ? 'select ' + selectNavItemClassName: ''}} zw-tabs-nav-item-class"
                s-for="tabs"
                data-index="{{index}}"
                bindtap="switchNav"
            >{{item.title}}</view>
            <view class="slide-border {{slideBarClassName}} {{transitionFlag ? 'transition' : ''}} {{initFinished ? 'slide-show' : ''}}" style="left:{{slideLeft}}px;"></view>
            <!-- <view s-else class="" ></view> -->
            <view class="tab-nav-border {{isIos ? 'ios' : ''}}"></view>
        </view>
    </block>
    <block s-else>
        <view
            class="tabs-nav tabs-nav-auto-wrapper {{mode === 'fixed' ? 'tabs-nav-fixed' : ''}} zw-tabs-nav-class"
            style="width:{{navBarWidth}}"
        >
            <scroll-view
                scroll-x="true"
                class="tabs-nav-auto"
                scroll-with-animation="true"
                scroll-left="{{scrollLeft}}"
                style="width:{{navBarWidth}}"
            >
                <view
                    class="nav-item {{navItemClassName}} {{index === currentIndex && transitionFlag ? 'select ' + selectNavItemClassName: ''}} zw-tabs-nav-item-class"
                    s-for="tabs"
                    data-index="{{index}}"
                    bindtap="switchNav"
                >
                    <block s-if="{{index === 0}}">
                        {{item.title}}
                        <!-- scroll-view下定位会自动加top导致样式异常，解决方法在item中加载滑块 -->
                        <view class="slide-border {{slideBarClassName}}" style="left:{{slideLeft}}px"></view>
                    </block>
                    <block s-else>
                        {{item.title}}
                    </block>
                </view>
            </scroll-view>
        </view>
    </block>
</view>
