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

简介: 【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;
    }
  }
}
复制代码


image.png


商品部分


🌀 商品部分的内容也是一个左右布局的,所以还是会采用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样式基础。对于厉害的人来说,可以忽略不看,直接跳到下一章。

相关文章
|
6天前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
102 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
2月前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
93 1
|
4月前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
5月前
|
JavaScript 前端开发 测试技术
组件化开发:创建可重用的Vue组件
【10月更文挑战第21天】组件化开发:创建可重用的Vue组件
52 1
|
5月前
|
JavaScript 前端开发
vue全局公共组件自动引入并注册,开发效率直接起飞!
【10月更文挑战第14天】vue全局公共组件自动引入并注册,开发效率直接起飞!
133 1
|
4月前
|
JavaScript UED
"Vue实战技巧大揭秘:一招解决路由跳转页面不回顶部难题,让你的单页面应用用户体验飙升!"
【10月更文挑战第23天】在Vue单页面应用中,点击路由跳转时,默认情况下页面不会自动滚动到顶部,这可能影响用户体验。本文通过一个新闻网站的案例,介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法,实现路由跳转时页面自动滚动到顶部的功能,提升用户浏览体验。
191 0
|
3月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
168 1
|
7天前
|
JavaScript 前端开发 算法
vue渲染页面的原理
vue渲染页面的原理
|
1月前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
|
1月前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
95 12

热门文章

最新文章