背景:

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"/>

         <script type="text/javascript" src="script/api.js"></script>


第一步、添加NVTabBar模块

https://docs.apicloud.com/Client-API/Nav-Menu/NVTabBar

使用APICloud登录网页

APICloud 使用NVTabBar做导航栏


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

 


 APICloud 使用NVTabBar做导航栏

 APICloud 使用NVTabBar做导航栏

分类:

技术点:

相关文章: