APICloud如何实现顶部导航栏切换功能

以你之姓@ 2022-03-07 10:28 307阅读 0赞

第一步、后台添加模板NVVavigationBar

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

第二步、在想要添加顶部导航栏的页面上设置如下代码

<!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>
    #titles{
      position: relative;
      width: 100%;
      height: 10%;
      margin-top: 0%;
      margin-left: 0%;
    }
    </style>
    </head>
    <body>
    <div id="titles">
    
    </div>
    </body>
    </html>
    <script type="text/javascript" src="script/api.js"></script>
    <script type="text/javascript" src="script/headed.js"></script>

headed.js代码如下

apiready = function() {
        var NVNavigationBar = api.require('NVNavigationBar');
        var mySlider = document.getElementById('titles'); //先获取放轮播图的div
        NVNavigationBar.open({
            rect: {
                x:0, //mySlider距离屏幕左边的距离
                y:0, //mySlider距离屏幕上边的距离
                w: api.winWidth, //mySlider的宽度
                h: 20//mySlider的高度
            },
            styles: {
                orientation: 'horizontal',
                bg: '#6b6b6b',
                bgAlpha: 1,
                font: {
                    size: 14,
                    sizeSelected: 18,
                    color: '#FFFFFF',
                    colorSelected: '#ff0000',
                    alpha: 1
                },
                itemSize: {
                    w: 90,
                    h: 44
                }
            },
            items: [{
                title: '标题一',
                bg: '#FFE7BA',
                bgSelected: '#ff00000'
            },  {
                title: '标题二',
                bg: '#CDCD00',
                bgSelected: '#FFA500'
            }, {
                title: '标题三',
                bg: '#BBFFFF',
                bgSelected: '#FFA500'
            }, {
                title: '标题四',
                bg: '#436EEE',
                bgSelected: '#FFA500'
            }],
            selectedIndex: 0,
            fixedOn: api.frameName,
            id:'first'
        }, function(ret, err) {
          //if
                  if (ret) {
                      if (ret.eventType == "click" && ret.index == 0) {
                          api.openFrame({
                              name: 'frame0',
                              url: 'widget://html/frame0.html',
                              rect: {
                                  x: 0,
                                  y: 30,
                                  w: 'auto',
                                  h: api.winHeight-20
                              }
                          })
                      }
                      //1
                      if (ret.eventType == "click" && ret.index == 1) {
                          api.openFrame({
                              name: 'frame1',
                              url: 'widget://html/frame1.html',
                              rect: {
                                x: 0,
                                y: 30,
                                  w: 'auto',
                                    h: api.winHeight-20
                              }
                          })
                      }
                      //1
                      if (ret.eventType == "click" && ret.index == 2) {
                          api.openFrame({
                              name: 'frame2',
                              url: 'widget://html/frame2.html',
                              rect: {
                                x: 0,
                                y: 30,
                                  w: 'auto',
                                    h: api.winHeight-20
                              }
                          })
                      }
                      //1
                      if (ret.eventType == "click" && ret.index == 3) {
                          api.openFrame({
                              name: 'frame3',
                              url: 'widget://html/frame3.html',
                              rect: {
                                x: 0,
                                y: 30,
                                  w: 'auto',
                                    h: api.winHeight-20
                              }
                          })
                      }
                      //1
                      var NVTabBar = api.require('NVTabBar');
                      NVTabBar.bringToFront();
                  }
                  //if
    
        });
    }

--------------------

实现的效果图如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: /images/20220307/50bc468739ce4a0b83be92431050c181.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1]: /images/20220307/d10f932807ce4aaea8618c9db7d834a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2]: /images/20220307/70859f2981e9418b86671f710779ff4f.png