持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第28天，点击查看活动详情

前言

实战已经开始了！前面几篇文章已经把路由和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>

底部空出来的部分是留给购物车栏的。

😲 由于左侧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">&yen;</span>33.6
            <span class="product__item__origin">&yen;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;
    }
  }
}

目前内容部分的布局已经实现了，可以将商品部分的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">&yen;</span>33.6
        <span class="product__item__origin">&yen;66.6</span>
      </p>
    </div>
  </div>
</div>

chrome-capture (1).gif

😲 至此整个详情页的核心布局就开发完成了，底部栏和商品加减的部分会留到购物车部分章节中。

总结

本篇文章主要是对详情页内容部分进行布局，对于一些样式比较薄弱的同学或者UI框架CV爱好者来说可以巩固一下CSS样式基础。对于厉害的人来说，可以忽略不看，直接跳到下一章。

【Vue3从零开始-实战】S15：详情页tab栏核心样式开发

前言

稿图

内容部分布局

tab栏

商品部分

总结