选项卡

需要先引入相关的CSS和JS文件：

<link rel="stylesheet" type="text/css" href="static/css/aui.min.css"/>

<script src="static/js/aui.min.js" type="text/javascript" charset="utf-8"></script>

警告⚠️

1.当前页面示例代码仅为列表页代码，每种选项卡效果可自行查询源码查看。

2.演示源代码用 VUE 处理动态效果。如需搬用代码，可自行适配调整。

示例代码

<div class="container">
    <header class="aui-header">
        <a class="aui-header-left" onclick="aui.closeWin()"><i class="iconfont iconreturn"></i></a>
        <div class="aui-header-title">tabbar选项卡</div>
    </header>
    <div class="aui-content">
        <div class="aui-lists">
            <div class="aui-list" onclick="aui.openWin('tabbar-with-top.html')">
                <div class="aui-list-left">顶部选项卡-点击切换</div>
                <div class="aui-list-right"><i class="iconfont aui-btn-right iconright1"></i></div>
            </div>
            <div class="aui-list" onclick="aui.openWin('tabbar-with-top-mescroll.html')">
                <div class="aui-list-left">顶部选项卡-左右滑动切换+上下拉加载刷新</div>
                <div class="aui-list-right"><i class="iconfont aui-btn-right iconright1"></i></div>
            </div>
            <div class="aui-list" onclick="aui.openWin('tabbar-with-footer.html')">
                <div class="aui-list-left">底部选项卡</div>
                <div class="aui-list-right"><i class="iconfont aui-btn-right iconright1"></i></div>
            </div>
            <div class="aui-list" onclick="aui.openWin('tabbar-with-footer-submenu.html')">
                <div class="aui-list-left">底部选项卡-二级菜单</div>
                <div class="aui-list-right"><i class="iconfont aui-btn-right iconright1"></i></div>
            </div>
            <div class="aui-list" onclick="aui.openWin('tabbar-with-left.html')">
                <div class="aui-list-left">侧边选项卡-左右联动</div>
                <div class="aui-list-right"><i class="iconfont aui-btn-right iconright1"></i></div>
            </div>
            <div class="aui-list" onclick="aui.openWin('tabbar-with-left-mescroll.html')">
                <div class="aui-list-left">侧边选项卡-点击切换+上下拉加载刷新</div>
                <div class="aui-list-right"><i class="iconfont aui-btn-right iconright1"></i></div>
            </div>
        </div>
    </div>
</div>