3.apicloud nav导航条

WeChat3179b543089b57cd5059ff4a929af198.png

html代码

<nav id="nav">
        <div class="menu selected" tapmode='selected' onclick="setNavMenuIndex(0)">水果</div>
        <div class="menu" tapmode='selected' onclick="setNavMenuIndex(1)">食材</div>
        <div class="menu" tapmode='selected' onclick="setNavMenuIndex(2)">零食</div>
        <div class="menu" tapmode='selected' onclick="setNavMenuIndex(3)">牛奶</div>
        <div class="menu" tapmode='selected' onclick="setNavMenuIndex(4)">蔬菜</div>
    </nav>

css代码

  nav {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-blox-orient: horizontal;
            -webkit-flex-flow: row;
            flex-flow: row;
            position: relative;
            width: 100%;
            height: 40px;
            background-color: #e3007f;
        }

        nav .menu {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            width: 100%;
            height: 40px;
            color: #f973b8;
            font-size: 13px;
            text-align: center;
        }

        nav .menu.selected {
            color: #fff;
            font-size: 14px;
            font-weight: bold;
        }

js代码

apiready = function() {
        var header = $api.byId('header');
        var nav = $api.byId('nav');
        $api.fixStatusBar(header);
        headerH = $api.offset(header).h;
        navrH = $api.offset(nav).h;
        menus = $api.domAll(nav, '.menu');
        openFrames();
    }

  var menus, headerH, navH;
    function openFrames() {
        var frames = [];
        for (var i = 0; i < menus.length; i++) {
            frames.push({
                name: 'main_frame' + i,
                url: './main_frame.html',
                pageParam: {
                    wareTypeIndex: i
                }
            });
        }

        api.openFrameGroup({
            name: 'mainFrameGroup',
            scrollEnabled: true,
            rect: {
                x: 0,
                y: headerH + navrH,
                w: 'auto',
                h: 'auto'
            },
            index: 0,
            frames: frames
        }, function(ret, err) {
            setNavMenuSelected(ret.index);
        });
    }

  //nav按钮点击事件
    function setNavMenuIndex(index_) {
        setNavMenuSelected(index_);
        api.setFrameGroupIndex({
            name: 'mainFrameGroup',
            index: index_,
            scroll: true
        });
    }

    //nav按钮选中事件
    function setNavMenuSelected(index_) {
        for (var i = 0; i < menus.length; i++) {
            if (index_ == i) {
                $api.addCls(menus[i], 'selected');
            } else {
                $api.removeCls(menus[i], 'selected');

            }
        }
    }