ApiCloud利用NVTabBar模块快速搭建起APP的框架

废话不说，直接上代码

模块地址：https://docs.apicloud.com/Client-API/Nav-Menu/NVTabBar

代码实例：

<!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">
        <link rel="stylesheet" type="text/css" href="./css/aui.css" />
    </head>
    <body>
        <header class="aui-bar aui-bar-nav" id="aui-header">
            <a class="aui-btn aui-pull-left"> <span class="aui-iconfont aui-icon-left"></span> </a>
            <div class="aui-title" id="header"></div>
        </header>
    </body>
    <script type="text/javascript" src="./script/api.js"></script>
    <script type="text/javascript">
        apiready = function() {
            api.parseTapmode();
            var header = $api.byId('aui-header');
            $api.fixStatusBar(header);
            var headerPos = $api.offset(header);
            var body_h = $api.offset($api.dom('body')).h;
            var NVTabBar = api.require('NVTabBar');
            NVTabBar.open({
                styles : {
                    bg : 'rgba(200,200,200,1)',
                    h : 54,
                    dividingLine : {
                        width : 0,
                        color : '#000'
                    },
                    badge : {
                        bgColor : '#f00',
                        numColor : '#000',
                        size : 6.0,
                        centerY : 2
                    }
                },
                items : [{
                    w : api.winWidth / 5.0,
                    iconRect : {
                        w : 25.0,
                        h : 25.0,
                    },
                    icon : {
                        normal : 'widget://image/nvtabbar/acti.png',
                        highlight : 'widget://image/nvtabbar/actied.png',
                        selected : 'widget://image/nvtabbar/actied.png'
                    },
                    title : {
                        text : '动态',
                        size : 12.0,
                        normal : '#696969',
                        selected : '#eb4f38',
                        marginB : 6.0
                    }
                }, {
                    w : api.winWidth / 5.0,
                    iconRect : {
                        w : 25.0,
                        h : 25.0,
                    },
                    icon : {
                        normal : 'widget://image/nvtabbar/guan.png',
                        highlight : 'widget://image/nvtabbar/guaned.png',
                        selected : 'widget://image/nvtabbar/guaned.png'
                    },
                    title : {
                        text : '发现',
                        size : 12.0,
                        normal : '#696969',
                        selected : '#eb4f38',
                        marginB : 6.0
                    }
                }, {
                    w : api.winWidth / 5.0,
                    bg : {
                        marginB : 0,
                        image : 'rgba(200,200,200,0)'
                    },
                    iconRect : {
                        w : 50,
                        h : 50,
                    },
                    icon : {
                        normal : 'widget://image/nvtabbar/yyuan.png',
                        highlight : 'widget://image/nvtabbar/mai.png',
                        selected : 'widget://image/nvtabbar/mai.png'
                    }
                }, {
                    w : api.winWidth / 5.0,
                    iconRect : {
                        w : 25.0,
                        h : 25.0,
                    },
                    icon : {
                        normal : 'widget://image/nvtabbar/bir.png',
                        highlight : 'widget://image/nvtabbar/bired.png',
                        selected : 'widget://image/nvtabbar/bired.png'
                    },
                    title : {
                        text : '消息',
                        size : 12.0,
                        normal : '#696969',
                        selected : '#eb4f38',
                        marginB : 6.0
                    }
                }, {
                    w : api.winWidth / 5.0,
                    iconRect : {
                        w : 25.0,
                        h : 25.0,
                    },
                    icon : {
                        normal : 'widget://image/nvtabbar/fav.png',
                        highlight : 'widget://image/nvtabbar/faved.png',
                        selected : 'widget://image/nvtabbar/faved.png'
                    },
                    title : {
                        text : '我的',
                        size : 12.0,
                        normal : '#696969',
                        selected : '#eb4f38',
                        marginB : 6.0
                    }
                }],
                selectedIndex : 0
            }, function(ret, err) {
                //alert(JSON.stringify(ret))
                if (ret) {
                    if (ret.eventType == "show") {
                        $api.html(header, '动态');
                        api.openFrame({
                            name : 'frame0',
                            url : './html/frame0.html',
                            rect : {
                                x : 0,
                                y : headerPos.h,
                                w : 'auto',
                                h : api.winHeight - headerPos.h - 54
                            }
                        })
                    }
                    if (ret.eventType == "click" && ret.index == 0) {
                        $api.html(header, '动态');
                        api.openFrame({
                            name : 'frame0',
                            url : './html/frame0.html',
                            rect : {
                                x : 0,
                                y : headerPos.h,
                                w : 'auto',
                                h : api.winHeight - headerPos.h - 54
                            }
                        })
                    }
                    if (ret.eventType == "click" && ret.index == 1) {
                        $api.html(header, '发现');
                        api.openFrame({
                            name : 'frame1',
                            url : './html/frame1.html',
                            rect : {
                                x : 0,
                                y : headerPos.h,
                                w : 'auto',
                                h : api.winHeight - headerPos.h - 54
                            }
                        })
                    }
                    if (ret.eventType == "click" && ret.index == 2) {
                        $api.html(header, '圈子');
                        api.openFrame({
                            name : 'frame2',
                            url : './html/frame2.html',
                            rect : {
                                x : 0,
                                y : headerPos.h,
                                w : 'auto',
                                h : api.winHeight - headerPos.h - 54
                            }
                        })
                    }
                    if (ret.eventType == "click" && ret.index == 3) {
                        $api.html(header, '消息');
                        api.openFrame({
                            name : 'frame3',
                            url : './html/frame3.html',
                            rect : {
                                x : 0,
                                y : headerPos.h,
                                w : 'auto',
                                h : api.winHeight - headerPos.h - 54
                            }
                        })
                    }
                    if (ret.eventType == "click" && ret.index == 4) {
                        $api.html(header, '我的');
                        api.openFrame({
                            name : 'frame4',
                            url : './html/frame4.html',
                            rect : {
                                x : 0,
                                y : headerPos.h,
                                w : 'auto',
                                h : api.winHeight - headerPos.h - 54
                            }
                        })
                    }
                    var NVTabBar = api.require('NVTabBar');
                    NVTabBar.bringToFront();
                }
            });
        };
    </script>
</html>

效果图：

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/yechangzhong-826217795/p/10298729.html