app 底部导航栏代码的实现

港控/mmm° 2022-03-09 11:55 261阅读 0赞

api.css

html{
    	font-family: sans-serif;
    }
    html,body,header,section,footer,div,ul,ol,li,img,a,span,em,del,legend,center,strong,var,fieldset,form,label,dl,dt,dd,cite,input,hr,time,mark,code,figcaption,figure,textarea,h1,h2,h3,h4,h5,h6,p{
    	margin:0;
    	border:0;
    	padding:0;
    	font-style:normal;
    }
    html,body {
    	-webkit-touch-callout:none;
    	-webkit-text-size-adjust:none;
    	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    	-webkit-user-select:none;
    	background-color: #fff;
    }
    nav,article,aside,details,main,header,footer,section,fieldset,figcaption,figure{
    	display: block;
    }
    img,a,button,em,del,strong,var,label,cite,small,time,mark,code,textarea{
    	display:inline-block;
    }
    header,section,footer {
    	position:relative;
    }
    ol,ul{
    	list-style:none;
    }
    input,button,textarea {
    	border:0;
    	margin:0;
    	padding:0;
    	font-size:1em;
    	line-height:1em;
    	/*-webkit-appearance:none;*/
    	background-color:rgba(0, 0, 0, 0);
    }
    span{
    	display:inline-block;
    }
    a:active, a:hover {
      outline: 0;
    }
    a, a:visited{
    	text-decoration:none;
    }
    
    label, .wordWrap{
        word-wrap: break-word;
        word-break: break-all;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }
    td,th {
      padding: 0;
    }
    .clearfix:after{
    	content: ' ';
    	display: block;
    	clear: both;
    	visibility:hidden;
    	line-height: 0;
    	height:0;
    }
    .loading_more{
    	display: block;
    	height: 1.5em;
    	width: 100%;
    }
    .loading_more:before {
    	display: inline-block; vertical-align: text-bottom;
    	content: ' '; height: 16px; width: 16px; margin-right: 6px;
    	background: url(../image/loading_more.gif) no-repeat center;
    	-webkit-background-size: contain;
    	background-size: contain;
    } 
    .loading_more:after {
    	content: '加载更多';	
    }

style.css

html,body {  font-size:14px; height:100%;  }
    .hover{ opacity: .8; }
    
    .flex-wrap{ display: -webkit-box;	display: -webkit-flex;	display: flex; }
    .flex-con{     -webkit-box-flex: 1;     -webkit-flex: 1;    flex: 1;}
    .flex-vertical{ -webkit-box-orient: vertical;-webkit-flex-flow: column;flex-flow: column;}
    
    .border-t,
    .border-b{ position:relative;  }
    .border-t:before,
    .border-b:after{     content: '';     position: absolute;     left: 0;  top:0;     background: #ddd;   right:0;    height: 1px;     -webkit-transform: scaleY(0.5);             transform: scaleY(0.5);     -webkit-transform-origin: 0 0;             transform-origin: 0 0; }
    .border-b:after{ top:auto; bottom:0;  }
    
    #wrap{ height: 100%; }

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"/>
        <style>
            header{ background-color: #f2f2f2; }
            header ul li { height: 50px; line-height: 50px; text-align: center; display: none; color: #323237; position: relative;font-size: 18px;  }
            header ul li.active{ display: block; }
            #footer{  background-color: #f2f2f2; }
            #footer ul li{  padding-top: 36px; padding-bottom: 4px; background: url() no-repeat center 2px; background-size: auto 30px; text-align: center; }
            #footer ul li.active{ color: #6ab494; }
            #footer ul li:nth-child(1){ background-image: url(./image/shouyes.png); }
            #footer ul li:nth-child(2){ background-image: url(./image/publics.png); }
            #footer ul li:nth-child(3){ background-image: url(./image/guanlis.png); }
            #footer ul li:nth-child(4){ background-image: url(./image/mys.png); }
            #footer ul li:nth-child(1).active{ background-image: url(./image/shouye.png); }
            #footer ul li:nth-child(2).active{ background-image: url(./image/public.png); }
            #footer ul li:nth-child(3).active{ background-image: url(./image/guanli.png); }
            #footer ul li:nth-child(4).active{ background-image: url(./image/my.png); }
            .flex-con{
              overflow: auto
            }
        </style>
    </head>
    <body>
    <div id="wrap" class="flex-wrap flex-vertical">
        <header>
            <ul>
                <li class="border-b active" >首页</li>
                <li class="border-b" >我的发布</li>
                <li class="border-b" >管理历史发布</li>
                <li class="border-b" >我的资料</li>
            </ul>
        </header>
        <div id="main" class="flex-con">
        </div>
        <div id="footer" class="border-t">
            <ul class="flex-wrap" >
                <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con active" >首页</li>
                <li tapmode="hover"  onclick="randomSwitchBtn( this );" class="flex-con" >发布</li>
                <li tapmode="hover"  onclick="randomSwitchBtn( this );" class="flex-con">管理</li>
                <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con" >我的</li>
            </ul>
        </div>
    </div
    </body>
    </html>
    <script type="text/javascript" src="script/api.js"></script>
    <script type="text/javascript">
        apiready = function () {
            $api.fixStatusBar( $api.dom('header') );
            api.setStatusBarStyle({
                style: 'dark',
                color: '#6ab494'
            });
            funIniGroup();
        }
    
        function funIniGroup(){
            var eHeaderLis = $api.domAll('header li'),
                frames = [];
            for (var i = 0,len = eHeaderLis.length; i < len; i++) {
                    frames.push( {
                        name: 'frame'+i,
                        url: './html/frame'+i+'.html',
                        bgColor : 'rgba(0,0,0,.2)',
                        bounces:true
                    } )
            }
            api.openFrameGroup({
                name: 'group',
                scrollEnabled: false,
                rect: {
                    x: 0,
                    y: $api.dom('header').offsetHeight,
                    w: api.winWidth,
                    h: $api.dom('#main').offsetHeight
                },
                index: 0,
                frames: frames
            }, function (ret, err) {
    
            });
        }
    
        // 随意切换按钮
        function randomSwitchBtn( tag ) {
            if( tag == $api.dom('#footer li.active') )return;
            var eFootLis = $api.domAll('#footer li'),
                eHeaderLis = $api.domAll('header li'),
                index = 0;
            for (var i = 0,len = eFootLis.length; i < len; i++) {
                if( tag == eFootLis[i] ){
                    index = i;
                }else{
                    $api.removeCls(eFootLis[i], 'active');
                    $api.removeCls(eHeaderLis[i], 'active');
                }
            }
            $api.addCls( eFootLis[index], 'active');
            $api.addCls( eHeaderLis[index], 'active');
            api.setFrameGroupIndex({
                name: 'group',
                index: index
            });
        }
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: /images/20220309/a717faf0cbb844b9861211e328862807.png