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

最新推荐文章于 2023-06-29 15:32:53 发布

qq_37591637

最新推荐文章于 2023-06-29 15:32:53 发布

阅读量2.6k

点赞数

分类专栏：手机软件h5应用制作

本文链接： https://blog.csdn.net/qq_37591637/article/details/88604032

版权

手机软件h5应用制作专栏收录该内容

43 篇文章 1 订阅

订阅专栏

第一步、后台添加模板NVVavigationBar

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

<!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

    });
}

实现的效果图如下