【Vue3从零开始-实战】S3：使用CSS技巧实现首页布局

2022-09-27 363

版权

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

简介： 【Vue3从零开始-实战】S3：使用CSS技巧实现首页布局

@@DVBVTGC2D7ROIYF4YK_@O.png

前言

实战已经开始了！在前面两篇文章中，我们把tabbar和顶部地址栏走了布局，而且还把部分公共的SCSS做了封装。在本章节中，会将首页剩余的内容样式布局都写完，由于样式部分没什么重点去说的，所以文章会比较精简，其中部分CSS的技巧会单独说明。

搜索栏

%85XN$RC]EY6XB]HR$L0U`R.png

根据稿图的效果，我们直接开始编写DOM元素和样式了。

<div class="search">
  <span class="iconfont">&#xe632;</span>
  <span class="search__text">山姆会员商店优惠商品</span>
</div>
复制代码

icon图标还是和上一章节一样，在iconfont网站直接搜索并把下载下来的字体文件覆盖到assets下面的font文件夹中。

5}5Z1XQQCA7K{H){AM{C38U.png

.search {
  margin-bottom: .12rem;
  line-height: .32rem;
  background: #F5F5F5;
  color: #B7B7B7;
  border-radius: .16rem;
  .iconfont {
    display: inline-block;
    padding: 0 .08rem 0 .16rem;
    font-size: .16rem;
  }
  &__text {
    display: inline-block;
    font-size: .14rem;
  }
}
复制代码

首页的搜索栏并不是一个input输入框，大家也可以用input框去实现哦。

banner

TWA(LD1BV@GA[GF%PWUN8M6.png

由于稿图中没有切图，所以我们可以自己去网上找一张图片即可。

<div class="banner">
      <img class="banner__img" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a8a16cef-f2b9-4644-b216-3b95bcb12602/a2320262-1180-40ac-b9ca-5c26af3c3ffd.jpg" />
</div>
复制代码

.banner {
  height: 0;
  overflow: hidden;
  padding-bottom: 22%;
  &__img {
    width: 100%;
    height: 0.86rem;
  }
}
复制代码

在banner样式中，我们给banner设置了高度为0，overflow为hidden，并给了一个padding值。

这是为了图片加载延迟导致页面抖动。

padding值是banner尺寸的宽高比。

~N5IKPO[`LU~`~GT7SU]XAX.png

图标列表

EFZB%[$AIW3(71{T)KE851L.png

<div class="icons">
    <div class="icons__item">
        <img class="icons__item__img" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a8a16cef-f2b9-4644-b216-3b95bcb12602/32b200e6-9af9-474d-865b-e11ae4709a68.png" />
        <p class="icons__item__desc">超市便利</p>
    </div>
</div>
复制代码

这里是直接将icons__item的DOM元素复制粘贴了10次，为了文章过长，这里只粘贴部分代码。

.icons {
  display: flex;
  flex-wrap: wrap;
  margin-top: .16rem;
  &__item {
    width: 20%;
    &__img {
      display:block;
      width: .4rem;
      height: .4rem;
      margin: 0 auto;
    }
    &__desc {
      margin: .06rem 0 .16rem 0;
      text-align: center;
      color: $content-font-color;
    }
  }
}
复制代码

X3YGFTP{H8)@RH@3DYGEDCG.png

分隔条

$LS{(7~PQCY}VC{P%Q62O__L.png$

<div class="gap"></div>
复制代码

.gap {
  margin: 0 -.18rem;
  height: .1rem;
  background: $content-bgColor;
}
复制代码

这一块就不细说了~~~

店铺列表

G3_S~C%W6[P`2WTZF$VYPTH.png

8M`67FD])@ZKQ~7`BB0~(MX.png

根据稿图我们需要把店铺列表进行布局，由于列表时需要滚动的，所以会复制粘贴许多一样的DOM元素去撑开列表。但是文章中贴出来的代码还是只有一部分。

<div class="nearby">
    <h3 class="nearby__title">附近店铺</h3>
    <div class="nearby__item">
      <img
        src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a8a16cef-f2b9-4644-b216-3b95bcb12602/e9e2929d-f491-489d-8fa5-bd6223e67b06.png"
        class="nearby__item__img"
      >
      <div class="nearby__content">
        <div class="nearby__content__title">沃尔玛</div>
        <div class="nearby__content__tags">
          <span class="nearby__content__tag">月售1万+</span>
          <span class="nearby__content__tag">月售1万+</span>
          <span class="nearby__content__tag">月售1万+</span>
        </div>
        <p class="nearby__content__highlight">VIP尊享满89元减4元运费券（每月3张）</p>
      </div>
    </div>
</div>
复制代码

.nearby {
  &__title {
    margin: .16rem 0 .02rem 0;
    font-size: .18rem;
    font-weight: normal;
    color: $content-font-color;
  }
  &__item {
    display: flex;
    padding-top: .12rem;
    &__img {
      margin-right: .16rem;
      width: .56rem;
      height: .56rem;
    }
  }
  &__content {
    flex: 1;
    padding-bottom: .12rem;
    border-bottom: 1px solid #f1f1f1;
    &__title {
      line-height: .22rem;
      font-size: .16rem;
      color: $content-font-color;
    }
    &__tags {
      margin-top: .08rem;
      line-height: .18rem;
      font-size: .13rem;
      color: $content-font-color;
    }
    &__tag {
      margin-right: .16rem;
    }
    &__highlight {
      margin: .08rem 0 0 0;
      line-height: .18rem;
      font-size: .13rem;
      color: #E93B3B;
    }
  }
}
复制代码

O2L(S5G%W6HI7A[R`N`(KIW.png

当我们去滚动内容元素时，会发现内容超出了，而且tabbar也移位了。

这时候我们就需要手动添加滚动方向的样式。

.wrapper {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0.5rem;
  right: 0;
  padding: 0 0.18rem;
  overflow-y: auto;
}
复制代码

在wrapper样式中，添加overflow-y: auto;即可。

~_(DZ)OKJ01G5U~J5`R4_1F.png

问题

按照首页这样的开发方式来看，App.vue页面里面的模板元素和样式就有大约300多行代码了，每次修改样式或者操作DOM元素的时候，就要上下翻很多次。

如果后期加上接口调用或者数据渲染的代码，一个页面起码超千行代码了。

所以我们需要进行代码拆分和精简。

在下一篇文章中，我们会对首页的代码进行优化，组件进行合理的拆分，然后使用v-for这样的vue指令来精简页面代码。

总结

本篇文章的内容主要是完善首页的代码，并没有做过多的说明。包括前面两篇文章的内容，主要是对布局和样式做了一些操作，如果大家已经对布局和样式有了很深的了解，可以忽略不看的，关键点就从下一篇文章开始正式使用vue的框架进行页面渲染的操作。

【Vue3从零开始-实战】S3：使用CSS技巧实现首页布局

前言

搜索栏

banner

图标列表

分隔条

店铺列表

问题

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

【Vue3从零开始-实战】S3：使用CSS技巧实现首页布局

前言

搜索栏

banner

图标列表

分隔条

店铺列表

问题

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景