APICloud NVNavigationBar 模塊頂部菜單頁面切換以及下劃線實現

首先上圖：

有三個子菜單，點擊每個子菜單顯示的頁面不一樣，並且選中的菜單下面有個下劃線，我看很多app都是這樣的，所以我也就想辦法弄成這樣，結果弄得還比較像吧。

（1）子菜單切換的原理就是設置點擊事件 的回調函數，每一個菜單都有自己的索引通過判斷點擊的是哪一個菜單，然後openFrame打開想要的頁面就可以了。

（2）下劃線的原理就是通過設置菜單的背景圖是一條橫線，通過調整圖片的空白位置就可以了。。

    var NVNavigationBar = api.require('NVNavigationBar');
          NVNavigationBar.open({
              rect: {
                   x: 0,
                   y: 40,
                   w: api.frameWidth,
                   h: 43 //導航欄的高度
              },
             styles: {
                   orientation: 'horizontal',
                   bg: '#e8e8e8',
                   bgAlpha: 1,
                   font: {
                     size: 16,
                     sizeSelected: 17,
                     color: '#000',
                     colorSelected: '#81a9c3',
                     alpha: 1
                   },
                   itemSize: {
                       w: 100,
                       h: 40  //菜單的高度
                   }
             },
              items: [{
                 title: '設備詳情',
                 bg: '#fff',
                 bgSelected: 'widget://image/heng.png',//設置下劃線背景圖片
                 size:{
                   w:120,
                   h:40 //菜單的高度
                 }
                 },{
                 title: '維修記錄',
                 bg: '#fff',
                 bgSelected: 'widget://image/heng.png',
                 size:{
                   w:120,
                   h:40
                 }
                 },{
                 title: '設備圖片',
                 bg: '#fff',
                 bgSelected: 'widget://image/heng.png',
                 size:{
                   w:120,
                   h:40
                 }
                 }],
                 selectedIndex: 0,
                 fixedOn: api.frameName,
                 id: 'first'
          }, function(ret, err) {
              // api.alert({msg:JSON.stringify(ret)});
              // if(ret.eventType=="click" && ret.index==0){
                  api.openFrame({
                           name: 'pro_detail',
                           url: 'widget://html/pro_detail.html',
                           pageParam:{
                             product:product
                           },
                           rect: {
                             x: 0,
                             y: 100,
                             w: 'auto',
                             h: api.winHeight-20
                           }
                  })
              // }
              if(ret.eventType=="click" && ret.index==1){
                  api.openFrame({
                           name: 'main',
                           url: 'widget://html/main.html',
                           rect: {
                             x: 0,
                             y: 100,
                             w: 'auto',
                             h: api.winHeight-20
                           }
                  })
              }
              if(ret.eventType=="click" && ret.index==2){
                  api.openFrame({
                           name: 'pro_img',
                           url: 'widget://html/pro_img.html',
                           pageParam:{
                             product:product
                           },
                           rect: {
                             x: 0,
                             y: 100,
                             w: 'auto',
                             h: api.winHeight-20
                           }
                  })
              }
              });
    }

我的圖片如下：