APICloud 使用NVTabBar做导航栏

心已赠人 2022-03-09 13:16 204阅读 0赞

### **背景：** ###

1、APICloud开发app

2、在index.html里面编辑，把原本的代码去掉

3、只留<link rel="stylesheet" type="text/css" href="./css/api.css"/>  
             <link rel="stylesheet" type="text/css" href="./css/style.css"/>

--------------------

第一步、添加NVTabBar模块

[https://docs.apicloud.com/Client-API/Nav-Menu/NVTabBar][https_docs.apicloud.com_Client-API_Nav-Menu_NVTabBar]

使用APICloud登录网页

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

--------------------

第二步、在Index.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/api.css"/>
        <link rel="stylesheet" type="text/css" href="./css/style.css"/>
    </head>
    <body>
    </body>
    </html>
    <script type="text/javascript" src="script/api.js"></script>
    <script type="text/javascript" src="script/tabbar.js"></script>

第三步、tabbar.js代码如下

apiready = function() {
        //开始
        api.parseTapmode();
        var NVTabBar = api.require('NVTabBar');
        NVTabBar.open({ //({
            //style
            styles: {
                bg: '#333',
                //bg:"widget://image/NVTabBar/tabbar_bg.png",
                h: 65,
                dividingLine: {
                    width: 0,
                    color: '#000'
                },
                badge: {
                    bgColor: '#ff0',
                    numColor: '#fff',
                    size: 6.0,
                    centerX: 40,
                    centerY: 6
                }
            },
            //style
            items: [{
                w: api.winWidth / 4.0,
                bg: {
                    marginB: 0,
                    image: 'rgba(200,200,200,0.6)'
                },
                iconRect: {
                    w: 25.0,
                    h: 25.0,
                },
                icon: {
                    normal: 'widget://image/shouyes.png',
                    highlight: 'widget://image/shouyes.png',
                    selected: 'widget://image/shouye.png'
                },
                title: {
                    text: '首页',
                    size: 12.0,
                    normal: '#696969',
                    selected: '#eb4f38',
                    marginB: 6.0
                }
            }, {
                w: api.winWidth / 4.0,
                bg: {
                    marginB: 0,
                    image: 'rgba(200,200,200,0.6)'
                },
                iconRect: {
                    w: 25.0,
                    h: 25.0,
                },
                icon: {
                    normal: 'widget://image/guanlis.png',
                    highlight: 'widget://image/guanlis.png',
                    selected: 'widget://image/guanli.png'
                },
                title: {
                    text: '管理',
                    size: 12.0,
                    normal: '#696969',
                    selected: '#eb4f38',
                    marginB: 6.0
                }
            }, {
                w: api.winWidth / 4.0,
                bg: {
                    marginB: 0,
                    image: 'rgba(200,200,200,0.6)'
                },
                iconRect: {
                    w: 25.0,
                    h: 25.0,
                },
                icon: {
                    normal: 'widget://image/publics.png',
                    highlight: 'widget://image/publics.png',
                    selected: 'widget://image/public.png'
                },
                title: {
                    text: '发布',
                    size: 12.0,
                    normal: '#696969',
                    selected: '#eb4f38',
                    marginB: 6.0
                }
            }, {
                w: api.winWidth / 4.0,
                bg: {
                    marginB: 0,
                    image: 'rgba(200,200,200,0.6)'
                },
                iconRect: {
                    w: 25.0,
                    h: 25.0,
                },
                icon: {
                    normal: 'widget://image/mys.png',
                    highlight: 'widget://image/mys.png',
                    selected: 'widget://image/my.png'
                },
                title: {
                    text: '我的',
                    size: 12.0,
                    normal: '#696969',
                    selected: '#eb4f38',
                    marginB: 6.0
                }
            }], //以上都没有缺口
            selectedIndex: 0
        }, function(ret, err) {
            //if
            if (ret) {
                //1
                if (ret.eventType == "show") {
                    api.openFrame({
                        name: 'frame0',
                        url: 'widget://html/frame0.html',
                        rect: {
                            x: 0,
                            y: 0,
                            w: 'auto',
                            h: 'auto',
                            marginLeft: 0, //相对父 window 左外边距的距离
                            marginTop: 0, //相对父 window 上外边距的距离
                            marginBottom: 0, //相对父 window 下外边距的距离
                            marginRight: 0 //相对父 window 右外边距的距离
                        }
                    })
                }
                //1
                //1
                if (ret.eventType == "click" && ret.index == 0) {
                    api.openFrame({
                        name: 'frame0',
                        url: 'widget://html/frame0.html',
                        rect: {
                            x: 0,
                            y: 30,
                            w: 'auto',
                            h: 'auto',
                            marginLeft: 0, //相对父 window 左外边距的距离
                            marginTop: 0, //相对父 window 上外边距的距离
                            marginBottom: 0, //相对父 window 下外边距的距离
                            marginRight: 0 //相对父 window 右外边距的距离
                        }
                    })
                }
                //1
                if (ret.eventType == "click" && ret.index == 1) {
                    api.openFrame({
                        name: 'frame1',
                        url: 'widget://html/frame1.html',
                        rect: {
                            w: 'auto',
                            h: 'auto',
                            marginLeft: 0, //相对父 window 左外边距的距离
                            marginTop: 0, //相对父 window 上外边距的距离
                            marginBottom: 0, //相对父 window 下外边距的距离
                            marginRight: 0 //相对父 window 右外边距的距离
                        }
                    })
                }
                //1
                if (ret.eventType == "click" && ret.index == 2) {
                    api.openFrame({
                        name: 'frame2',
                        url: 'widget://html/frame2.html',
                        rect: {
                            w: 'auto',
                            h: 'auto',
                            marginLeft: 0, //相对父 window 左外边距的距离
                            marginTop: 0, //相对父 window 上外边距的距离
                            marginBottom: 0, //相对父 window 下外边距的距离
                            marginRight: 0 //相对父 window 右外边距的距离
                        }
                    })
                }
                //1
                if (ret.eventType == "click" && ret.index == 3) {
                    api.openFrame({
                        name: 'frame3',
                        url: 'widget://html/frame3.html',
                        rect: {
                            x: 0,
                            y: 0,
                            w: 'auto',
                            h: 'auto',
                            marginLeft: 0, //相对父 window 左外边距的距离
                            marginTop: 0, //相对父 window 上外边距的距离
                            marginBottom: 0, //相对父 window 下外边距的距离
                            marginRight: 0 //相对父 window 右外边距的距离
                        }
                    })
                }
                //1
                var NVTabBar = api.require('NVTabBar');
                NVTabBar.bringToFront();
            }
            //if
        });
    }

--------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2][]

[https_docs.apicloud.com_Client-API_Nav-Menu_NVTabBar]: https://docs.apicloud.com/Client-API/Nav-Menu/NVTabBar
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: /images/20220309/66271b0da4874e15870d17ef42cbfcf9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1]: /images/20220309/cf6cd2ce487345a3bfadd997008bc9d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2]: /images/20220309/0de83918bbbb42808b352afc4ad9ae51.png