前言
实战已经开始了！前面几篇文章已经把路由和mock接口的内容讲过了，包括动态路由传参，接口动态传参等。本篇文章将会对详情页最核心部分的样式开发，以及tab栏的布局。如果你对布局或者样式都已经了然于心了，那这篇你可以忽略。
稿图
🌀 根据稿图可以看出，内容部分是左右布局，左侧是tab栏，右侧是商品列表。底部栏部分相对比较简单了，所以主要讲解的布局是内容部分。
内容部分布局
🌀 内容部分是一个左右布局的方式，所以会用flex布局，而整个内容部分都是仅限于自己滚动，而顶部栏和底部栏都是固定的，所以会在其中使用overflow-y来控制上下滚动。
🌀 相对于详情页来说，内容部分是一个整体，而且主要的逻辑和样式都在这里面，所以可以单独提取出来做一个组件，这样可以把样式和逻辑单独进行维护，不至于详情页的代码量看起来太大而乱糟糟的。
👉 在shop目录下新建Content.vue组件
👉 在Shop.vue中引入并使用组件
import Content from './Content' 复制代码
components: { Content } 复制代码
<Content /> 复制代码
tab栏
👉 DOM元素
<template> <div class="content"> <div class="category"> <div class="category__item">全部商品</div> <div class="category__item">秒杀</div> <div class="category__item">新鲜水果</div> <div class="category__item">休闲食品</div> <div class="category__item">时令蔬菜</div> <div class="category__item">肉蛋家禽</div> </div> </div> </template> 复制代码
👉 样式
<style lang="scss" scoped> .content { display: flex; position: absolute; left: 0; right: 0; top: 1.5rem; bottom: .5rem; } .category{ overflow-y: scroll; height: 100%; width: .76rem; background-color: #F5F5F5; &__item{ line-height: .4rem; text-align: center; font-size: .14rem; color: #333; } } </style> 复制代码
![EJKUBU8U]D5]47CF6V8SW`H.png](https://ucc.alicdn.com/pic/developer-ecology/1117d4b71a6e4fe98add64d4dda418aa.png?x-oss-process=image/resize,w_1400/format,webp "EJKUBU8U]D5]47CF6V8SW`H.png")
- 底部空出来的部分是留给购物车栏的。
😲 由于左侧tab栏的数据目前比较少，如果多的话，会不会滚动起来呢？我们可以把DOM元素多复制一点去测一下看看。
🤔 tab栏上还有一个选中的样式
<div class="category__item category__item--active">全部商品</div> 复制代码
- 根据样式规则，__表示子样式，--表示对子样式的修饰
.category{ overflow-y: scroll; height: 100%; width: .76rem; background-color: #F5F5F5; &__item{ line-height: .4rem; text-align: center; font-size: .14rem; color: #333; &--active{ background-color: #fff; } } } 复制代码
商品部分
🌀 商品部分的内容也是一个左右布局的，所以还是会采用flex布局方式。
😲 为了确保功能的统一性，商品部分的加减按钮会在购物车章节去写，包括底部栏也会一起留到购物车章节中。
👉 DOM元素
<template> <div class="content"> <div class="category"> <!-- 这里是tab栏的DOM元素 --> </div> <div class="product"> <div class="product__item"> <img class="product__item__img" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a8a16cef-f2b9-4644-b216-3b95bcb12602/6aeb68d9-0e8c-4d7a-9cb0-50463565cae5.jpg" /> <div class="product__item__detail"> <h4 class="product__item__title">番茄250g/份</h4> <p class="product__item__sales">月售10件</p> <p class="product__item__price"> <span class="product__item__yen">¥</span>33.6 <span class="product__item__origin">¥66.6</span> </p> </div> </div> </div> </div> </template> 复制代码
👉 样式
.product{ overflow-y: scroll; flex: 1; &__item{ display: flex; padding: .12rem 0; margin: 0 .16rem; border-bottom: .01rem solid #f1f1f1; &__img{ width: .68rem; height: .68rem; margin-right: .16rem; } &__title{ margin: 0; line-height: .2rem; font-size: .14rem; color: #333; } &__sales{ margin: .06rem 0; font-size: .12rem; color: #333; } &__price{ margin: 0; line-height: .2rem; font-size: .14rem; color: #E93B3B; } &__yen{ font-size: .12rem; } &__origin{ line-height: .2rem; font-size: .12rem; color: #999; text-decoration: line-through; } } } 复制代码
![{O9){55L_}6NU]O6KIF9TZE.png](https://ucc.alicdn.com/pic/developer-ecology/7dc812508c47415c85a25bec2abb3e36.png?x-oss-process=image/resize,w_1400/format,webp "{O9){55L_}6NU]O6KIF9TZE.png")
- 目前内容部分的布局已经实现了，可以将商品部分的DOM元素多复制几份看看会不会和tab栏的样式冲突。
🤔 为了简单实现效果，可以使用v-for指令直接循环10次
<div class="product"> <div class="product__item" v-for="item in 10" :key="item"> <img class="product__item__img" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a8a16cef-f2b9-4644-b216-3b95bcb12602/6aeb68d9-0e8c-4d7a-9cb0-50463565cae5.jpg" /> <div class="product__item__detail"> <h4 class="product__item__title">番茄250g/份</h4> <p class="product__item__sales">月售10件</p> <p class="product__item__price"> <span class="product__item__yen">¥</span>33.6 <span class="product__item__origin">¥66.6</span> </p> </div> </div> </div> 复制代码
😲 至此整个详情页的核心布局就开发完成了，底部栏和商品加减的部分会留到购物车部分章节中。
总结
本篇文章主要是对详情页内容部分进行布局，对于一些样式比较薄弱的同学或者UI框架CV爱好者来说可以巩固一下CSS样式基础。对于厉害的人来说，可以忽略不看，直接跳到下一章。
