APICloud在结合AUI组件后如何实现底部导航栏的切换？

问题描述：
哪位大佬知道APICloud在结合AUI组件后如何实现底部导航栏的切换？
我的程序如下：
出错的原因是：randomSwitchBtn is not defined at jibu.html,
<!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" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>智步</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <style type="text/css">
        .text-white {
            color: #FFFFFF !important;
        }

        .aui-grid [class*=aui-col-] {
            padding: 0.75rem 0;
        }
    </style>
</head>

<body>
    <header id="header" class="aui-bar aui-bar-nav" tapmode style="background-color:#AE0000;">智步</header>



    <footer id="footer" class="aui-bar aui-bar-tab">
        <div class="aui-bar-tab-item aui-active selected" tapmode onclick="randomSwitchBtn(this,'计步',0)">
            <i class="aui-iconfont aui-icon-paper aui-text-danger"></i>
            <div class="aui-bar-tab-label" style="color:red;">计步</div>
        </div>
        <div id="tabbar2" class="aui-bar-tab-item" tapmode onclick="randomSwitchBtn(this,'定位',1)">
            <i class="aui-iconfont aui-icon-location"></i>
            <div class="aui-bar-tab-label">定位</div>
        </div>
        <div id="tabbar3" class="aui-bar-tab-item" tapmode onclick="randomSwitchBtn(this,'我的',2)">
            <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.dom('header');
        $api.fixStatusBar($header);
        var body = $api.dom('body');
        var $footer = $api.byId('footer');
        var headerH = $api.offset('header');
        var bodyH = api.winHeight;
        var footerH = $api.offset('footer');

        api.openFrameGroup({
                name: 'foot_tab_demo',
                scrollEnabled: true,
                rect: {
                    x: 0,
                    y: headerH,
                    w: 'auto',
                    h: bodyH - headerH - footerH
                },
                index: 0,
                preload: 3,
                frames: [{
                    name: 'jibu',
                    url: 'html/jibu.html',
                    bgColor: '#fff'
                }, {
                    name: 'dingwei',
                    url: 'html/dingwei.html',
                    bgColor: '#fff'
                }, {
                    name: 'my',
                    url: 'html/my.html',
                    bgColor: '#fff'
                }]
            },
            function(ret, err) {
                if (ret) {
                    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');
                    }
                }
            })

        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
            });

        }

        function closeWin() {
            api.closeWin();
        }
    }
</script>

</html>
答
把 function randomSwitchBtn(){} 放到apiready 外面
APICloud在结合AUI组件后如何实现底部导航栏的切换？

相关推荐
