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
                           }
                  })
              }
              });
    }

我的图片如下：