APICloud 使用NVTabBar做导航栏

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

qq_37591637

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

阅读量2.5k

点赞数

分类专栏：手机软件h5应用制作

本文链接：https://blog.csdn.net/qq_37591637/article/details/88528136

版权

手机软件h5应用制作专栏收录该内容

43 篇文章 1 订阅

订阅专栏

背景：

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

使用APICloud登录网页

第二步、在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
    });
}