项目之nav导航

效果如下

微信截图_20181110015251.png

由于导航条是一个hot板块下的组件，因此在hot下新建一个名为hotnav.vue的组件

<template>
    <div class="hot-nav">
        <div class="hot-nav-content">
            <div class="nav-content-inner">
                <a class="inner-item">
                    <img src="./../../imgs/nav/nav_icon01.png">
                    <span>限时秒杀</span>
                </a>
                <a class="inner-item">
                    <img src="./../../imgs/nav/nav_icon01.png">
                    <span>限时秒杀</span>
                </a>
                <a class="inner-item">
                    <img src="./../../imgs/nav/nav_icon01.png">
                    <span>限时秒杀</span>
                </a>
                <a class="inner-item">
                    <img src="./../../imgs/nav/nav_icon01.png">
                    <span>限时秒杀</span>
                </a>
                <a class="inner-item">
                    <img src="./../../imgs/nav/nav_icon01.png">
                    <span>限时秒杀</span>
                </a>
                <a class="inner-item">
                    <img src="./../../imgs/nav/nav_icon01.png">
                    <span>限时秒杀</span>
                </a>
                <a class="inner-item">
                    <img src="./../../imgs/nav/nav_icon01.png">
                    <span>限时秒杀</span>
                </a>
                <a class="inner-item">
                    <img src="./../../imgs/nav/nav_icon01.png">
                    <span>限时秒杀</span>
                </a>
                <a class="inner-item">
                    <img src="./../../imgs/nav/nav_icon01.png">
                    <span>限时秒杀</span>
                </a>
                <a class="inner-item">
                    <img src="./../../imgs/nav/nav_icon01.png">
                    <span>限时秒杀</span>
                </a>
                <a class="inner-item">
                    <img src="./../../imgs/nav/nav_icon01.png">
                    <span>限时秒杀</span>
                </a>
                <a class="inner-item">
                    <img src="./../../imgs/nav/nav_icon01.png">
                    <span>限时秒杀</span>
                </a>
                <a class="inner-item">
                    <img src="./../../imgs/nav/nav_icon01.png">
                    <span>限时秒杀</span>
                </a>
                <a class="inner-item">
                    <img src="./../../imgs/nav/nav_icon01.png">
                    <span>限时秒杀</span>
                </a>
                <a class="inner-item">
                    <img src="./../../imgs/nav/nav_icon01.png">
                    <span>限时秒杀</span>
                </a>
                <a class="inner-item">
                    <img src="./../../imgs/nav/nav_icon01.png">
                    <span>限时秒杀</span>
                </a>
            </div>
        </div>
        <div class="hot-content-bottom">
            <div class="hot-bottom-inner" :style="innerBarStyle"></div>
        </div>
    </div>
</template>

<script>

   
    export default{
        name:"HotNav",
}
</script>
<style scoped lang="stylus" ref="stylesheet/stylus">
    .hot-nav
        width 100%
        height 180px
        position relative
        background-color #fff
        padding-bottom 10px
        .hot-nav-content
            width 100%
            overflow-x scroll
            .nav-content-inner
                width 720px
                height 180px
                display flex
                flex-wrap wrap
                .inner-item
                    width 90px
                    height 90px
                    display flex
                    flex-direction column
                    justify-content center
                    align-items center
                    font-size 14px
                    color #666666
                    img 
                        width 40%
                        margin-bottom 5px
        .hot-nav-content::-webkit-scrollbar
            display none
        .hot-content-bottom
            width 100px
            height 2px
            background-color #ccc
            position absolute
            left 50%
            margin-left -50px
            bottom 8px
            .hot-bottom-inner
                position absolute
                left 0
                height 100%
                background-color orangered 


</style>

1.第一层hot-nav主要设置宽度，这个毋庸置疑 肯定是占满屏幕的100%，高度就自己测量到就是那个高度，然后因为是主面板，所以设置一个布局relative为之后导航条做绝对定位做准备。

2.第二层hot-nav-content 主要是设置超出部分滚动

3.nav-content-inner 这个设置总体的长度，同时设置超出部分换行

4.inner-item设置图片容器的高和宽，同时设置图片和文字的排列方式以及对齐方式，文字大小以及颜色

5..hot-nav-content::-webkit-scrollbar
display none

设置这个是取消滚动条的显示效果，::-webkit-scrollbar是为了适配safiri浏览器