【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样式基础。对于厉害的人来说,可以忽略不看,直接跳到下一章。

相关文章
|
29天前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
129 64
|
29天前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
110 60
|
3天前
|
JavaScript API 数据处理
vue3使用pinia中的actions,需要调用接口的话
通过上述步骤,您可以在Vue 3中使用Pinia和actions来管理状态并调用API接口。Pinia的简洁设计使得状态管理和异步操作更加直观和易于维护。无论是安装配置、创建Store还是在组件中使用Store,都能轻松实现高效的状态管理和数据处理。
22 3
|
29天前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
33 8
|
28天前
|
存储 JavaScript 数据管理
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
31 1
|
28天前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
38 1
|
29天前
|
JavaScript
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
|
1月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
8天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
1月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
43 1
vue学习第一章

热门文章

最新文章