【Vue3从零开始-实战】S2：使用Scss对顶部栏进行布局

2022-09-27 238

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【Vue3从零开始-实战】S2：使用Scss对顶部栏进行布局

@@DVBVTGC2D7ROIYF4YK_@O.png

前言

实战已经开始了，上一篇主要是对首页tabbar的样式进行了编写，本章节则会对首页顶部栏进行布局，使用到的Scss会有些多，而且内容看起来有些复杂，所以还需要大家耐心观看。

整体布局

DW87(R%3(87[[79VHPTMKJO.png

首页的整个页面是分为内容区域和tabbar区域两个区块。

⭐️ 内容区域可以在一个div标签下去完成渲染。

<div class="wrapper">
    内容区域
</div>
复制代码

.wrapper{
  position: absolute;
  left: 0;
  top: 0;
  bottom: .5rem;
  right: 0;
  background-color: red;
}
复制代码

UKGTQUSY7W~6%PLY{M(O4$A.png

在id为app的div标签下面已经分为了内容区域和tabbar区域了。

地址栏布局

🌀 内容区域确定之后，就可以细分区块来写样式布局了。

1. 先确定左右间距padding

1022HFUTP662{MP{3N1C6HL.png

.wrapper{
  position: absolute;
  left: 0;
  top: 0;
  bottom: .5rem;
  right: 0;
  padding: 0 0.18rem;
}
复制代码

2. 确定地址栏的内容和间距padding

7GF_OIST4ALE@0@NM4~0TW2.png

<div class="wrapper">
    <div class="position">
      北京理工大学国防科技园2号楼10层
    </div>
</div>
复制代码

.position{
  padding: 0.16rem 0;
  line-height: .22rem;
  font-size: .16rem;
}
复制代码

T)9XRY~VT~YQNR53}F%$~4Q.png

3. 地址栏icon

OY[XOE6@6BITF}9`AXVJ1P7.png

地址栏中有一个定位的icon和一个消息提醒的icon，在上一篇文章中，我们使用过iconfont来渲染页面上的icon。

($6~~YDY{7HWB4WU5E(XBXM.png

由于点击生成iconfont的CDN有问题，所以我们还是采用下载至本地的方式来使用iconfont。如果大家在实战过程中，发现生成CDN已经可以使用了，那么最好还是使用CDN，这样就不用每次都去替换新的字体了。

iconfont添加完成并下载至本地之后，需要替换assets目录下面的font的字体文件。

LB~J1{`{I2IEYW5PJ@VZGSL.png

<div class="wrapper">
    <div class="position">
        <span class="iconfont position__icon">&#xe8ae;</span>
        北京理工大学国防科技园2号楼10层
        <span class="iconfont position__info">&#xe62f;</span>
    </div>
</div>
复制代码

.position{
  padding: 0.16rem 0;
  line-height: .22rem;
  font-size: .16rem;
  &__icon{
    font-size: .2rem;
  }
}
复制代码

)LI~R13Q91{L1P)VSM%}JQH.png

当我们想给icon的字体大小为.2rem（20像素）的时候，会发现字体大小的样式并没有改变，还是使用的iconfont中的16px。

这是因为我们在页面上将iconfont和position__icon两个样式名都写在一个class里面，而样式中我们使用的是& 拼接的。

这时候就不能使用&拼接了，可以直接写成全部的类名。

.position{
  padding: 0.16rem 0;
  line-height: .22rem;
  font-size: .16rem;
  .position__icon{
    font-size: .2rem;
  }
}
复制代码

JT@[JCOGDPA{H]5V7(CXKO2.png

⭐️ 根据稿图，我们可以看出消息提醒的icon是在地址栏中居右的。所以我们可以使用绝对定位的方式让它靠右显示。

.position{
  position: relative;
  padding: 0.16rem 0;
  line-height: .22rem;
  font-size: .16rem;
  .position__icon{
    font-size: .2rem;
  }
  .position__info{
    position: absolute;
    right: 0;
    top: .16rem;
    font-size: .2rem;
  }
}
复制代码

GAQR}YP2S%6YQ6I0]9M$D%R.png

大致的样式都已经调完了，但是icon和文字肉眼看起来好像不在同一高度似的，所以我们在给icon的top额外增加0.01rem。

.position{
  position: relative;
  padding: 0.16rem 0;
  line-height: .22rem;
  font-size: .16rem;
  .position__icon{
    position: relative;
    top: 0.01rem;
    font-size: .2rem;
  }
  .position__info{
    position: absolute;
    right: 0;
    top: .17rem;
    font-size: .2rem;
  }
}
复制代码

$AC0HY@K~{{B`2_JE_PR@BVN.png$

4. 样式变量

@O]QJU83N`WSGX(WX%(X@@V.png

无论是顶部栏的地址内容，还是tabbar的文字描述，他们的字体颜色都是#333，所以可以把这一部分提取出来放到一个单独的scss文件中去统一管理。

D0B%(_BET[U95@_DFF[)`16.png

👉 在style文件夹中新建一个viriables.scss文件，然后在里面定义一个变量$content-font-color: #333;用来设置文本内容的字体颜色。

@import './style/viriables.scss';
复制代码

在App.vue中就要引入定义的scss文件了。

<style lang="scss">
@import './style/viriables.scss';
.position{
  color: $content-font-color; // 定义的变量
}
.tabbar {
  color: $content-font-color; // 定义的变量
}
</style>
复制代码

在地址栏和tabbar的样式中就可以直接去使用定义的变量了。

S89UF$3VS5%IXEHY6YVJZ_J.png

5. 样式混入

在地址栏中如果文本超长了，我们需要截断隐藏并使用...来显示隐藏部分。但是在后面的内容中，可能还会有类似的隐藏文本的样式需要写，所以这次我们就把这个会经常用到的样式封装起来，混入到需要的地方去。

$P]USJ%YG@N)[FL~{3E_JQXC.png$

👉 在style文件夹中新建一个mixins.scss文件，然后将常用的样式通过@mixin封装起来。

@mixin ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
复制代码

同样需要在App.vue里面引入scss文件。

@import './style/mixins.scss';
复制代码

在地址栏的样式中可以通过@include xxx的方式混入样式。

<style lang="scss">
@import './style/mixins.scss';
.position{
  @include ellipsis;
}
</style>
复制代码

GAQ5S72RXP$15FP1F%)BYVN.png

总结

本篇文章主要是对地址栏部分的内容进行布局，而且对一些常用的css进行了封装和混入，更多内容会在后面的文章中展现出来，敬请期待哦！！！

【Vue3从零开始-实战】S2：使用Scss对顶部栏进行布局

前言

整体布局

地址栏布局

1. 先确定左右间距padding

2. 确定地址栏的内容和间距padding

3. 地址栏icon

4. 样式变量

5. 样式混入

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景