持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情
前言
实战已经开始了！在前面两篇文章中，我们把tabbar和顶部地址栏走了布局，而且还把部分公共的SCSS做了封装。在本章节中，会将首页剩余的内容样式布局都写完，由于样式部分没什么重点去说的，所以文章会比较精简，其中部分CSS的技巧会单独说明。
搜索栏
根据稿图的效果，我们直接开始编写DOM元素和样式了。
<div class="search">
<span class="iconfont"></span>
<span class="search__text">山姆会员商店优惠商品</span>
</div>
- icon图标还是和上一章节一样，在iconfont网站直接搜索并把下载下来的字体文件覆盖到assets下面的font文件夹中。
.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
由于稿图中没有切图，所以我们可以自己去网上找一张图片即可。
<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尺寸的宽高比。
图标列表
<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;
}
}
}
分隔条
<div class="gap"></div>
.gap {
margin: 0 -.18rem;
height: .1rem;
background: $content-bgColor;
}
- 这一块就不细说了~~~
店铺列表
根据稿图我们需要把店铺列表进行布局，由于列表时需要滚动的，所以会复制粘贴许多一样的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;
}
}
}
- 当我们去滚动内容元素时，会发现内容超出了，而且tabbar也移位了。
- 这时候我们就需要手动添加滚动方向的样式。
.wrapper {
position: absolute;
left: 0;
top: 0;
bottom: 0.5rem;
right: 0;
padding: 0 0.18rem;
overflow-y: auto;
}
- 在wrapper样式中，添加overflow-y: auto;即可。
问题
按照首页这样的开发方式来看，App.vue页面里面的模板元素和样式就有大约300多行代码了，每次修改样式或者操作DOM元素的时候，就要上下翻很多次。
如果后期加上接口调用或者数据渲染的代码，一个页面起码超千行代码了。
所以我们需要进行代码拆分和精简。
在下一篇文章中，我们会对首页的代码进行优化，组件进行合理的拆分，然后使用v-for这样的vue指令来精简页面代码。
总结
本篇文章的内容主要是完善首页的代码，并没有做过多的说明。包括前面两篇文章的内容，主要是对布局和样式做了一些操作，如果大家已经对布局和样式有了很深的了解，可以忽略不看的，关键点就从下一篇文章开始正式使用vue的框架进行页面渲染的操作。
