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

2022-10-08 338

版权

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

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

@@DVBVTGC2D7ROIYF4YK_@O.png

前言

实战已经开始了！前面几篇文章已经把路由和mock接口的内容讲过了，包括动态路由传参，接口动态传参等。本篇文章将会对详情页最核心部分的样式开发，以及tab栏的布局。如果你对布局或者样式都已经了然于心了，那这篇你可以忽略。

稿图

5L8N6KIJQ84~RJQS3RTRACJ.png

🌀 根据稿图可以看出，内容部分是左右布局，左侧是tab栏，右侧是商品列表。底部栏部分相对比较简单了，所以主要讲解的布局是内容部分。

内容部分布局

🌀 内容部分是一个左右布局的方式，所以会用flex布局，而整个内容部分都是仅限于自己滚动，而顶部栏和底部栏都是固定的，所以会在其中使用overflow-y来控制上下滚动。

🌀 相对于详情页来说，内容部分是一个整体，而且主要的逻辑和样式都在这里面，所以可以单独提取出来做一个组件，这样可以把样式和逻辑单独进行维护，不至于详情页的代码量看起来太大而乱糟糟的。

👉 在shop目录下新建Content.vue组件

_4L6C$JNW)1D`BO8%0[JJ37.png

👉 在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

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

😲 由于左侧tab栏的数据目前比较少，如果多的话，会不会滚动起来呢？我们可以把DOM元素多复制一点去测一下看看。

$1B7AU_DI(PM_7B_F{R6[86K.png$

KRF(C_228E9YN~T45~CHEI6.png

🤔 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;
    }
  }
}
复制代码

${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">&yen;</span>33.6
        <span class="product__item__origin">&yen;66.6</span>
      </p>
    </div>
  </div>
</div>
复制代码

4LX`Z1LUX8RRPO${(9NI@W0.png

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

总结

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

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

前言

稿图

内容部分布局

tab栏

商品部分

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景