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

2022-09-27 284

版权

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

简介： 【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. 样式混入

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

前言

整体布局

地址栏布局

1. 先确定左右间距padding

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

3. 地址栏icon

4. 样式变量

5. 样式混入

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景