向日葵的曼珠沙华 2019-04-21 11:08 采纳率: 0%
浏览 1163

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>

  • 写回答

1条回答 默认 最新

  • 海阔凭鱼跃_api 2021-10-29 17:36
    关注

    把 function randomSwitchBtn(){} 放到apiready 外面

    评论

报告相同问题?

悬赏问题

  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能
  • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面
  • ¥50 NT4.0系统 STOP:0X0000007B
  • ¥15 想问一下stata17中这段代码哪里有问题呀