[关闭]
@YDS 2017-07-20T13:03:16.000000Z 字数 6238 阅读 1135

当首页上部导航栏需要切换时如何解决

开发问题

重点在js！！！！！思路！！！

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6.     <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7.     <title>index</title>
  8.     <link rel="stylesheet" type="text/css" href="../css/aui.css" />
  9.     <style>
  10.         #header {
  11.             width:100%;
  12.             height:3.5rem;
  13.             background:#fff;
  14.             text-align:center;
  15.             line-height:2.2rem;
  16.         }
  17.         #header .aui-tab {
  18.             background:none;
  19.         }
  20.         .aui-bar-tab-label {
  21.             color:#656565;
  22.         }
  23.         .aui-active .aui-bar-tab-label {
  24.             color:#282828;
  25.         }
  26.         .aui-icon-home01 {
  27.             background:url(../image/my_tab01.png) no-repeat center center;
  28.             display:block;
  29.             background-size:1.1rem 1.1rem;
  30.         }
  31.         .aui-icon-my01 {
  32.             background:url(../image/my_tab02.png) no-repeat center center;
  33.             display:block;
  34.             background-size:1.1rem 1.1rem;
  35.         }
  36.         .aui-active .aui-icon-home01 {
  37.             background:url(../image/my_tab01_h.png) no-repeat center center;
  38.             background-size:1.1rem 1.1rem;
  39.         }
  40.         .aui-active .aui-icon-my01 {
  41.             background:url(../image/my_tab02_h.png) no-repeat center center;
  42.             background-size:1.1rem 1.1rem;
  43.         }
  44.         /*微招聘/发现/精英库 未选中*/
  45.         .aui-icon-job{
  46.             background:url(../image/my_job.png) no-repeat center center;
  47.             display:block;
  48.             background-size:1.1rem 1.1rem;
  49.         }
  50.         .aui-icon-find{
  51.             background:url(../image/my_find.png) no-repeat center center;
  52.             display:block;
  53.             background-size:1.1rem 1.1rem;
  54.         }
  55.         .aui-icon-cream{
  56.             background:url(../image/my_cream.png) no-repeat center center;
  57.             display:block;
  58.             background-size:1.1rem 1.1rem;
  59.         }
  60.          /*微招聘/发现/精英库 已选中*/
  61.         .aui-active .aui-icon-job {
  62.             background:url(../image/my_job_on.png) no-repeat center center;
  63.             background-size:1.1rem 1.1rem;
  64.         }
  65.         .aui-active .aui-icon-find {
  66.             background:url(../image/my_find_on.png) no-repeat center center;
  67.             background-size:1.1rem 1.1rem;
  68.         }
  69.         .aui-active .aui-icon-cream {
  70.             background:url(../image/my_cream_on.png) no-repeat center center;
  71.             background-size:1.1rem 1.1rem;
  72.         }
  73.     </style>
  74. </head>
  75. <body>
  76.     <header id="header" class="aui-bar aui-bar-nav" style="border-bottom:0.05rem solid #ddd;">
  77.         <a class="aui-pull-left aui-btn" tapmode onclick="fnOpenSearch()">
  78.             <span class="aui-iconfont aui-icon-search" style="color:#282828;"></span>
  79.         </a>
  80.         <div class="aui-tab aui-title" id="tab">
  81.           <div class="aui-tab-item aui-active" tapmode onclick="changeGroupIndex(0)">活动</div>
  82.           <div class="aui-tab-item" tapmode onclick="changeGroupIndex(1)">文章</div>
  83.           <div class="aui-tab-item" tapmode onclick="changeGroupIndex(2)">订阅</div>
  84.         </div>
  85.         <a class="aui-pull-right aui-btn" tapmode onclick="fnOpenList()">
  86.             <span class="aui-iconfont aui-icon-menu" style="color:#282828;"></span>
  87.         </a>
  88.     </header>
  89.     <footer class="aui-bar aui-bar-tab" id="footer">
  90.         <div class="aui-bar-tab-item aui-active" tapmode onclick="fnOpenTabFrame(0)">
  91.             <i class="aui-iconfont aui-icon-home01"></i>
  92.             <div class="aui-bar-tab-label">直播</div>
  93.         </div>
  94.         <div class="aui-bar-tab-item" tapmode onclick="fnOpenTabFrame(1)">
  95.             <i class="aui-iconfont aui-icon-job"></i>
  96.             <div class="aui-bar-tab-label">微招聘</div>
  97.         </div>
  98.         <div class="aui-bar-tab-item" tapmode onclick="fnOpenTabFrame(2)">
  99.             <i class="aui-iconfont aui-icon-find"></i>
  100.             <div class="aui-bar-tab-label">发现</div>
  101.         </div>
  102.         <div class="aui-bar-tab-item" tapmode onclick="fnOpenTabFrame(3)">
  103.             <i class="aui-iconfont aui-icon-cream"></i>
  104.             <div class="aui-bar-tab-label">精英库</div>
  105.         </div>
  106.         <div class="aui-bar-tab-item" tapmode onclick="fnOpenTabFrame(4)">
  107.             <i class="aui-iconfont aui-icon-my01"></i>
  108.             <div class="aui-bar-tab-label">我的</div>
  109.         </div>
  110.     </footer>
  111. </body>
  112. <script type="text/javascript" src="../script/api.js"></script>
  113. <script type="text/javascript">
  114.     apiready = function(){
  115.         fnInitEventListenner();
  116.         header = $api.byId('header');;
  117.         var footer = $api.byId('footer');
  118.         $api.fixStatusBar(header);
  119.         headerH = $api.offset(header).h;
  120.         footerH = $api.offset(footer).h;
  121.         menus = $api.domAll(footer, '.aui-bar-tab-item');
  122.         tabBars =  $api.domAll(header, '.aui-tab-item');
  123.         api.setStatusBarStyle({
  124.             style: 'dark'
  125.         });
  126.         api.openFrame({
  127.             name: '',
  128.             url: '',
  129.             bounces: false,
  130.             rect: {
  131.                 x: 0,
  132.                 y: headerH,
  133.                 w: 'auto',
  134.                 h: 'auto',
  135.                 marginBottom:footerH
  136.             }
  137.         });
  138.         api.openFrameGroup({
  139.             name: 'indexFrameGroup',
  140.             background: '#fff',
  141.             scrollEnabled: true,
  142.             rect: {
  143.                 x: 0,
  144.                 y: headerH,
  145.                 w: 'auto',
  146.                 h: 'auto',
  147.                 marginBottom:footerH
  148.             },
  149.             index: 1,
  150.             frames:[
  151.                 {
  152.                     name: 'index_frame0', 
  153.                     url: './index_frame0.html', 
  154.                     pageParam:{}, 
  155.                     bounces:true, 
  156.                     opaque:true,
  157.                     bgColor: '#fff'
  158.                 },{
  159.                     name: 'index_frame1', 
  160.                     url: './index_frame1.html', 
  161.                     pageParam:{}, 
  162.                     bounces:false, 
  163.                     opaque:true,
  164.                     bgColor: '#fff'
  165.                 },{
  166.                     name: 'index_frame2', 
  167.                     url: './index_frame2.html', 
  168.                     pageParam:{}, 
  169.                     bounces:false, 
  170.                     opaque:true,
  171.                     bgColor: '#fff'
  172.                 }
  173.             ]
  174.         }, function(ret, err){
  175.             var name = ret.name;
  176.             var index = ret.index;
  177.             fnSetTabBarsSelected(index);
  178.         });
  179.     }
  180.     //打开frame
  181.     var header;
  182.     var headerH;
  183.     var footerH;
  184.     function fnOpenTabFrame(index_) {
  185.         var aIndex = [{
  186.             isgroup: false
  187.         }, {
  188.             name: 'job',
  189.             url: 'job.html',
  190.             isgroup: true
  191.         }, {
  192.             name: 'find',
  193.             url: 'find.html',
  194.             isgroup: true
  195.         }, {
  196.             name: 'cream',
  197.             url: 'cream.html',
  198.             isgroup: true
  199.         }, {
  200.             name: 'my',
  201.             url: 'my.html',
  202.             isgroup: true,
  203.             event: 'event_my_refresh'
  204.         }
  205.     ];
  206.     fnSetNavMenuIndex(index_);
  207.     for (var i = 0; i < aIndex.length; i++) {
  208.         var obj = aIndex[i];
  209.         //当前被点击的
  210.         if (i === index_) {
  211.             api.setFrameGroupAttr({
  212.                 name: 'indexFrameGroup',
  213.                 hidden: obj.isgroup
  214.             });
  215.         if (obj.url) {
  216.                 api.openFrame({
  217.                     name: 'my',
  218.                     url: './my.html',
  219.                     bounces: false,
  220.                     rect: {
  221.                         x: 0,
  222.                         y: 0,
  223.                         w: 'auto',
  224.                         h: 'auto',
  225.                         marginBottom: footerH
  226.                     }
  227.                 });
  228.             }
  229.         if (obj.event) {
  231.                 api.sendEvent({
  232.                     name: obj.event,
  233.                     extra: {}
  234.                 });
  235.             }
  236.             } else {
  237.             //其他项
  238.             if (obj.name) {
  239.                 api.setFrameAttr({
  240.                     name: obj.name,
  241.                     hidden: true
  242.                 });
  243.                 }
  244.             }
  245.         }
  246.     }
  247.     function changeGroupIndex(index_) {
  248.         fnSetTabBarsSelected(index_);
  249.         api.setFrameGroupIndex({
  250.             name: 'indexFrameGroup',
  251.             index: index_,
  252.             scroll: true
  253.         });
  254.     }
  255.     function fnInitEventListenner() {
  256.         api.addEventListener({
  257.             name:'keyback'
  258.         }, function(ret, err){        
  259.             api.confirm({
  260.                 title: '提示',
  261.                 msg: '是否退出应用',
  262.                 buttons: ['确定', '取消']
  263.             }, function(ret, err){
  264.                 if( ret.buttonIndex == 1 ){
  265.                      api.closeWidget();
  266.                 }
  267.             });
  268.         });
  269.     }
  270.     var menus;
  271.     function fnSetNavMenuIndex(index_) {
  272.         fnSetNavMenuSelected(index_);
  273.         if (index_ == 0) {
  274.             header.style.display = 'block';
  275.         } else{
  276.             header.style.display = 'none';
  277.         }
  278.     }
  279.     var menus; 
  280.     function fnSetNavMenuSelected(index_) {
  281.         for(var i = 0; i<menus.length; i++ ) {
  282.             if( index_ == i) {
  283.                 $api.addCls(menus[i], 'aui-active');
  284.             } else {
  285.                 $api.removeCls(menus[i], 'aui-active');
  286.             }
  287.         }
  288.     }
  289.     var tabBars;
  290.     function fnSetTabBarsSelected(index_) {
  291.         for(var i = 0; i<tabBars.length; i++ ) {
  292.             if( index_ == i) {
  293.                 $api.addCls(tabBars[i], 'aui-active');
  294.             } else {
  295.                 $api.removeCls(tabBars[i], 'aui-active');
  296.             }
  297.         }
  298.     }
  299.     function fnOpenPersonCenterWin(argument) {
  300.         var isLogin = false;
  301.         if (isLogin) {
  302.             ;
  303.         } else {
  304.             api.openWin({
  305.                 name: 'login',
  306.                 url: './login.html',
  307.                 pageParam: {
  308.                     name: 'test'
  309.                 }
  310.             });
  311.         }
  312.     }
  313.     function fnOpenSearch(){
  314.         api.openWin({
  315.           name: 'index_ss',
  316.           url: './index_ss.html',
  317.           pageParam:{'headerH':headerH}
  318.         });
  319.     }
  320.     function fnOpenList(){
  321.         api.openWin({
  322.           name: 'index_list',
  323.           url: './index_list.html',
  324.           pageParam:{'headerH':headerH}
  325.         });
  326.     }
  327. </script>
  328. </html>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注