顶部导航（网页中的TabLayout）

网页的中的导航，主要是nav标签，里面的tab项就用div就好了，然后设置一下样式

<nav id="nav">
     <div class="menu selected" tapmode onclick="setTab(0)"><体育/div>
     <div class="menu" tapmode onclick="setTab(1)">新闻</div>
     <div class="menu" tapmode onclick="setTab(2)">财经</div>
     <div class="menu" tapmode onclick="setTab(3)">军事</div>
</nav>

样式

nav {
            position: relative;
            box-sizing: border-box;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-flex-flow: row;
            flex-flow: row;
            width: 100%;
            height: 40px;
            padding-left: 36px;
            padding-right: 36px;
            text-align: center;
            background-color: #f0f0f0;
        }

        nav .menu {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            box-sizing: border-box;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            text-align: center;
            color: #CACACA;
            border-bottom: 2px solid #f0f0f0;
            background-repeat: no-repeat;
            background-size: auto 14px;
            background-position: 8px 13px;
            margin-left: 10px;
            margin-right: 10px;
        }

        nav .selected {
            color: #2BBC5B;
            border-bottom: 2px solid #2BBC5B;
        }

border-bottom主要来设置指示线的颜色，分选中和未选中的颜色，未选中时的背景色就跟nav背景色一致即可。

逻辑：

<script type="text/javascript">
    var menus;
    apiready = function(){
        var header = $api.byId('header');
        var nav = $api.byId('nav');
        $api.fixStatusBar(header);
        var headerH = $api.offset(header).h;
        var navH = $api.offset(nav).h;

        menus = $api.domAll(nav, '.menu');
        // 打开FrameGroup，就像Fragment
        var frames = [{
            name: 'deal_doing_frame',
            url: './deal_doing_frame.html'
        }, {
            name: 'deal_buy_frame',
            url: './deal_buy_frame.html'
        }, {
            name: 'deal_sell_frame',
            url: './deal_sell_frame.html'
        }, {
            name: 'deal_done_frame',
            url: './deal_done_frame.html'
        }];
        api.openFrameGroup({
            name: 'dealFrameGroup',
            scrollEnabled: false,//禁止滑动
            rect: {
                x: 0,
                y: headerH + navH,
                w: 'auto',
                h: 'auto'
            },
            index: 0,
            frames: frames
        }, function(ret, err) {
            if (ret) {
                changeTabClass(ret.index);
            }
        });
    }

    var a = 0;
    function setTab(position) {
        //防止已选中Tab重复点击重复加载数据
        if (a == position) {
            return;
        }
        a = position;
        changeTabClass(position);
        api.setFrameGroupIndex({
            name: 'dealFrameGroup',
            index: position,
            scroll: true,
            reload: true//是否重新刷新页面
        });
    }

    function changeTabClass(position) {
        for (var i = 0; i < menus.length; i++) {
            if (position == i) {
                $api.addCls(menus[i], 'selected');
            } else {
                $api.removeCls(menus[i], 'selected');
            }
        }
    }
</script>

上面的这种利用border-bottom来实现，大部分情况都实用，但是总有一种比较刁钻的指示器样式，如下图：
这里写图片描述
下面的指示器很短，而上面的Tab内容却很长，这时候用border-bottom来实现就比较难受了！所以说干脆换一种布局方式，指示器单独用div写 - - ！如下：

<nav id="nav">
            <div class="menu selected" tapmode onclick="setTab(0)">
                <div>体育体育</div>
                <div id="indicator0" class="indicator"></div>
            </div>
            <div class="menu" tapmode onclick="setTab(1)">
                <div>新闻体育</div>
                <div id="indicator1"></div>
            </div>
            <div class="menu" tapmode onclick="setTab(2)">
                <div>财经体育</div>
                <div id="indicator2"></div>
            </div>
            <div class="menu" tapmode onclick="setTab(3)">
                <div>军事体育</div>
                <div id="indicator3"></div>
            </div>
        </nav>

然后在setTab点击事件的for循环中根据position单独去控制每个Tab的指示器，动态添加和移除，跟改变文字颜色一样

switch (position) {
            case 0:
                $api.addCls($api.byId('indicator0'), 'indicator');
                $api.removeCls($api.byId('indicator1'), 'indicator');
                $api.removeCls($api.byId('indicator2'), 'indicator');
                $api.removeCls($api.byId('indicator3'), 'indicator');
                break;
            case 1:
                $api.addCls($api.byId('indicator1'), 'indicator');
                $api.removeCls($api.byId('indicator0'), 'indicator');
                $api.removeCls($api.byId('indicator2'), 'indicator');
                $api.removeCls($api.byId('indicator3'), 'indicator');
                break;
            case 2:
                $api.addCls($api.byId('indicator2'), 'indicator');
                $api.removeCls($api.byId('indicator0'), 'indicator');
                $api.removeCls($api.byId('indicator1'), 'indicator');
                $api.removeCls($api.byId('indicator3'), 'indicator');
                break;
            case 3:
                $api.addCls($api.byId('indicator3'), 'indicator');
                $api.removeCls($api.byId('indicator0'), 'indicator');
                $api.removeCls($api.byId('indicator1'), 'indicator');
                $api.removeCls($api.byId('indicator2'), 'indicator');
                break;
        }

————————————————————————————————————————————————————————————
上面这中是Tab标签底部带下划线指示器的那种，还有一种类似这样的：
这里写图片描述
这种用UI框架能实现，但是我刚学习了flex布局之后，觉得这样式可以用flex布局实现。于是就写了一下。

样式

.container {
            display: -webkit-flex;
            display: -webkit-box;
            display: flex;
            height: 300px;
            background: #ccc;
            justify-content: center;
            align-items: center;
        }

        .base_tab {
            width: 70px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: #fff;
            color: #ccc;
        }

        .tab1 {
            border-right: 1px solid #f00;
            box-sizing: border-box;
            border-radius: 4px 0 0 4px
        }

        .tab3 {
            border-left: 1px solid #f00;
            box-sizing: border-box;
            border-radius: 0 4px 4px 0
        }

        .select {
            background: #f00;
            color: white
        }

布局：

<body>
    <div class="container">
        <div class="base_tab tab1 select" onclick="setTab(0)" tapmode>Item1</div>
        <div class="base_tab" onclick="setTab(1)" tapmode>Item2</div>
        <div class="base_tab tab3" onclick="setTab(2)" tapmode>Item3</div>
    </div>
</body>

核心代码：

<script type="text/javascript">
    var tabs;
    apiready = function() {
        tabs = $api.domAll($api.dom('.container'), '.base_tab');
    };

    function setTab(position) {
        for (var i = 0; i < tabs.length; i++) {
            if (position == i) {
                $api.addCls(tabs[i], 'select');
            } else {
                $api.removeCls(tabs[i], 'select');
            }
        }
    }
</script>

顶部导航（网页中的TabLayout）

猜你喜欢