9.阳光沙滩-Vue移动端教程-首页制作-顶部栏样式

前言

这期写了好久，代码写的很爽，可是要写笔记就麻烦一点。

效果是我一点点调试出来的，由于是文章就不一点点带大家调试，我只说主体结构，剩下的细节大家看我具体代码好了。（有机会出个视频）

在csdn中，顶部栏存在于各个页面，无论是首页，还是文章详情页面。那么就涉及到一个组件的复用问题。

项目地址：https://github.com/cctyl/sunofbeach_mobile

分析

显然这个不是一个路由组件，因为我们不通过url来访问顶部栏，那就是普通组件。

所以，我们在components目录下创建一个Header.vue组件，内容暂时不写

为了实现各个页面都显示顶部栏的效果，那么他应该放在App.vue中。

我们在App.vue中引入此组件

查看页面效果

编写Header样式结构

我们看下Header的组成

最左边是一个图标，中间是一个搜索框，右边是一个登录后的个人头像，没登录情况下展示的是一个登录文字，最右边的一个功能菜单，我们之后再做。

我们开始制作。

既然引入了nutui，那比不可能自己重新写。

首先给最外层套一个flex容器，使用 https://nutui.jd.com/2x/#/flex

<nut-row>
    <nut-col :span="6">
        <div class="flex-content">span:6</div>
    </nut-col>
    <nut-col :span="6">
        <div class="flex-content flex-content-light">span:6</div>
    </nut-col>
    <nut-col :span="6">
        <div class="flex-content">span:6</div>
        </nut-col>
    <nut-col :span="6">
        <div class="flex-content flex-content-light">span:6</div>
    </nut-col>
</nut-row>

上面的每一个nut-col就是一列，span就是占多少，总宽度为24，由span属性决定此col占多少宽度。

Header的每个部分都写到那nut-col中。

首先是logo部分，查看sunofbeach，发现logo并不是一张图片，而是普通文字放大的效果，我们也模仿一个：

<nut-col :span="3">
    <div class="flex-content logo">
       SOB
    </div>


</nut-col>

.logo{
        text-align: center;
        height: 26px;
        line-height: 36px;
        font-size: 19px;
        color: #37f;
        margin-left: -5px;
    }

接下来是搜索框，我们就不自己写了，直接使用nutui的搜索框

https://nutui.jd.com/2x/#/searchbar

然后是一个登录按钮，具体逻辑我们还没写到，暂时只写个文本，调整一下样式。

最右边的more按钮，用iconfont的图标来代替，图标就是文字，调整文字大小让他居中。 icon-more

最终的效果是这样的

具体代码如下所示：

<template>
    <div   class="container">


        <nut-row>
            <nut-col :span="3">
                <div class="flex-content logo">
                   SOB
                </div>


            </nut-col>
            <nut-col :span="16">
                <div class="flex-content flex-content-light">
                    <nut-searchbar
                        v-model="val"
                        placeText="请输入自定义文案"
                    ></nut-searchbar>
                </div>
            </nut-col>
            <nut-col :span="3">
                <div class="flex-content loginText">登录</div>
            </nut-col>
            <nut-col :span="1">
                <span class="iconfont icon-more"></span>
            </nut-col>
        </nut-row>




    </div>
</template>

<script>
    export default {
        name: "Header.vue"
    }
</script>

<style scoped>

    .container{
        padding: 10px 5px;
    }


    .logo{
        text-align: center;
        height: 26px;
        line-height: 36px;
        font-size: 19px;
        color: #37f;
        margin-left: -5px;
    }

    .loginText{
        height: 26px;
        line-height: 36px;
        margin-left: 9px;


    }

    .icon-more{

        height: 26px;
        line-height: 36px;
        vertical-align: middle;
    }
</style>