APICloud NVTabBar模块点击菜单实现页面的切换

首先上图：

打开app默认的页面是设备管理，点击设备管理是一个页面，点击扫一扫是可以扫描条形码，点击我的是个人中心。

设备管理页面的子菜单的思路和之前设备列表页面是一样的。

（1）index.html页面加载头部和底部样式页面框架，框架里面再加载不同的页面。

首页加载的页面分为三部分，头部，内容，和尾部，

  <div id="wrap">
      <div id="header">
          <h1>欢迎进入资产管理系统</h1>
      </div>
      <div id="main" class="flex-con">
      </div>
      <div id="footer">
 
      </div>
  </div>

 需要获取一下头部和内容部的高度，以便确定之后加载的frame的位置。

      var header = $api.byId('header');
      //适配iOS 7+，Android 4.4+状态栏
      $api.fixStatusBar(header);
      var headerPos = $api.offset(header);

      var main = $api.byId('main');
      var mainPos = $api.offset(main);

 底部是用的NVTabBar模块，通过设置点击菜单的回调函数打开一个frame ，然后设置从x，y出开始渲染页面，根据main的高度来确定加载的frame页面的位置，以便他不会覆盖整个的页面，rect是关键，然后就能实现菜单之间的页面切换嘞。

rect: {
            x:0,             //左上角x坐标，数字类型
            y:41,             //左上角y坐标，数字类型
             w:'auto',             //宽度，若传'auto'，页面从x位置开始自动充满父页面宽度，数字或固定值'auto'
             h:mainPos.h-100,
           }

      var NVTabBar = api.require('NVTabBar');  //导入NVTabBar模块
     
     NVTabBar.open({
            styles: {
                bg: '#81a9c3',  //菜单背景色
                //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
                }
            },
            items: [{
                w: api.winWidth / 3.0,
                bg: {
                    marginB: 0,
                    image: '#81a9c3'
                },
                iconRect: {
                    w: 25.0,
                    h: 25.0,
                },
                icon: {
                    normal: 'widget://image/NVTabBar/sever.png',
                    highlight: 'widget://image/NVTabBar/severed.png',
                    selected: 'widget://image/NVTabBar/severed.png'
                },
                title: {
                    text: '设备管理',
                    size: 12.0,
                    normal: '#696969',
                    selected: '#1296db',
                    marginB: 6.0
                }
            }, {
                w: api.winWidth / 3.0,
                bg: {
                    marginB: 17,//子项背景距离模块底部的距离
                    // image: 'widget://image/NVTabBar/yuan.png' //中间背景图
                },
                iconRect: {
                    w: 75,//里面条形码的大小   //第一种 75 75   第二种 60 75
                    h: 75,
                },
                icon: {
                    normal: 'widget://image/nvtabbar/scanner1.png',   //注意这里的路径问题会导致编译不出来
                    highlight: 'widget://image/nvtabbar/scanner1.png',
                    selected: 'widget://image/nvtabbar/scanner1.png'
                },

                title: {
                    text : '扫一扫',
                    size: 12.0,
                    normal: '#04477d',   //字体颜色
                    selected: '#547c92',  //选中后字体颜色
                    marginB: 0
                }
            }, {
                w: api.winWidth / 3.0,
                bg: {
                    marginB: 0,
                    image: '#81a9c3'
                },
                iconRect: {
                    w: 25.0,
                    h: 25.0,
                },
                icon: {
                    normal: 'widget://image/NVTabBar/user.png',
                    highlight: 'widget://image/NVTabBar/usered.png',
                    selected: 'widget://image/NVTabBar/usered.png'
                },
                title: {
                    text: '我的',
                    size: 12.0,
                    normal: '#696969',
                    selected: '#1296db',
                    marginB: 6.0
                }
            }],
            selectedIndex: 0
        }, function(ret, err) {
              if (ret) {
                  // if (ret.eventType == "click" && ret.index == 0) {  //eventType：交互事件的类型；ret.index为按钮的索引

                    api.openFrame({
                        name: 'pro_menu',
                        url: 'widget://html/pro_menu.html',
                        rect: {
                              x:0,             //左上角x坐标，数字类型
                              y:41,             //左上角y坐标，数字类型
                              w:'auto',             //宽度，若传'auto'，页面从x位置开始自动充满父页面宽度，数字或固定值'auto'
                              h:mainPos.h-100,
                        }
                    });
                  // }
                  if (ret.eventType == "click" && ret.index == 1) {  //eventType：交互事件的类型；ret.index为按钮的索引
                      fnOpenNormalQRCode();//直接打开扫描条形码界面
                  }
                  if (ret.eventType == "click" && ret.index == 2) {  //eventType：交互事件的类型；ret.index为按钮的索引
                    api.openFrame({
                        name: 'my',
                        url: 'widget://html/my.html',
                        rect: {
                              x:0,             //左上角x坐标，数字类型
                              y:42,             //左上角y坐标，数字类型
                              w:'auto',             //宽度，若传'auto'，页面从x位置开始自动充满父页面宽度，数字或固定值'auto'
                              h:mainPos.h-100,
                        }
                    });

                  }
               }//function-if
         });//end  NVTabBar