apicloud aui 做底部导航

最新推荐文章于 2022-04-09 15:28:25 发布

luochengquan

最新推荐文章于 2022-04-09 15:28:25 发布

阅读量2.2k

点赞数 4

分类专栏： html css js

html css js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

apicloud aui 做底部导航

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>底部</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
</head>

<body>
    <header class="aui-bar aui-bar-nav" id="aui-header">顶部导航栏</header>
    <footer class="aui-bar aui-bar-tab" id="footer">
        <div id="tabbar1" class="aui-bar-tab-item aui-active" tapmode οnclick="randomSwitchBtn(this,'首页',0)">
            <i class="aui-iconfont aui-icon-home"></i>
            <div class="aui-bar-tab-label">首页</div>
        </div>
        <div id="tabbar2" class="aui-bar-tab-item" tapmode οnclick="randomSwitchBtn(this,'未接',1)">
            <i class="aui-iconfont aui-icon-phone"></i>
            <div class="aui-bar-tab-label">未接</div>
        </div>
        <div id="tabbar3" class="aui-bar-tab-item" tapmode οnclick="randomSwitchBtn(this,'已结',2)">
            <i class="aui-iconfont aui-icon-cart"></i>
            <div class="aui-bar-tab-label">已结</div>
        </div>
        <div id="tabbar4" class="aui-bar-tab-item" tapmode οnclick="randomSwitchBtn(this,'呼出',3)">
            <i class="aui-iconfont aui-icon-my"></i>
            <div class="aui-bar-tab-label">呼出</div>
        </div>
        <div id="tabbar5" class="aui-bar-tab-item" tapmode οnclick="randomSwitchBtn(this,'挂断',4)">
            <i class="aui-iconfont aui-icon-my"></i>
            <div class="aui-bar-tab-label">挂断</div>
        </div>
    </footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() {
    api.parseTapmode();
    var header = $api.byId('aui-header');
    var footer = 　$api.byId('footer')
    $api.fixStatusBar(header);
    var headerPos = $api.offset(header);
    var body_h = api.winHeight;
    var footer_h = $api.offset(footer).h;

    api.openFrameGroup({
        name: 'footer_tab_demo',
        scrollEnabled: true,
        rect: {
            x: 0,
            y: headerPos.h,
            w: 'auto',
            h: body_h - headerPos.h - footer_h
        },
        index: 0,
        preload: 3,
        frames: [{
            name: 'main',
            url: 'html/main.html',
            bounces: false
        }, {
            name: 'footer_tab_2',
            url: 'html/footer_tab_2.html',
            bounces: false
        }, {
            name: 'footer_tab_3',
            url: 'html/footer_tab_3.html',
            bounces: false
        }, {
            name: 'footer_tab_4',
            url: 'html/footer_tab_4.html',
            bounces: false
        }, {
            name: 'footer_tab_5',
            url: 'html/footer_tab_5.html',
            bounces: false
        }]
    }, function(ret, err) {
        var footer = $api.byId('footer');
        var footerAct = $api.dom(footer, '.aui-bar-tab-item.aui-active');
        $api.removeCls(footerAct, 'aui-active');

        var name = ret.name;
        var index = ret.index;
        if (index == 0) {
            $api.text($api.byId('aui-header'), '首页');
            $api.addCls($api.byId('tabbar1'), 'aui-active');
        } else if (index == 1) {
            $api.text($api.byId('aui-header'), '未接');
            $api.addCls($api.byId('tabbar2'), 'aui-active');
        } else if (index == 2) {
            $api.text($api.byId('aui-header'), '已结');
            $api.addCls($api.byId('tabbar3'), 'aui-active');
        } else if (index == 3) {
            $api.text($api.byId('aui-header'), '呼出');
            $api.addCls($api.byId('tabbar4'), 'aui-active');

        } else if (index == 4) {
            $api.text($api.byId('aui-header'), '挂断');
            $api.addCls($api.byId('tabbar5'), 'aui-active');
        }
    })
}

function closeWin() {
    api.closeWin();
}

function randomSwitchBtn(obj, name, index) {
    $api.text($api.byId('aui-header'), name);
    var footer = $api.byId('footer');
    var footerAct = $api.dom(footer, '.aui-bar-tab-item.aui-active');
    $api.removeCls(footerAct, 'aui-active');
    $api.addCls(obj, 'aui-active');
    api.setFrameGroupIndex({
        name: 'footer_tab_demo',
        index: index,
        scroll: true
    });

}
</script>

</html>