【Vue3从零开始-实战】S16：详情页样式优化及tab栏内容联动功能实现

2022-10-08 268

版权

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

简介： 【Vue3从零开始-实战】S16：详情页样式优化及tab栏内容联动功能实现

@@DVBVTGC2D7ROIYF4YK_@O.png

前言

实战已经开始了！上一篇章节中把详情页内容部分的整体样式都已经写完了，本章节会先把样式进行一个优化，tab栏和商品内容部分的联动功能也需要通过mock接口来实现。

优化样式

🌀 在项目框架搭建初期，我们把一些通用的颜色样式放到了统一的scss文件中。当我们通过全局搜索某个颜色的时候，发现都还是直接写的颜色值，所以我们需要统一进行管理。

FHTI068W(UP(6~80K]NQB]8.png

👉 在Shop.vue和Content.vue中找到没有进行统一管理的颜色值之后，在viriables.scss中进行定义。

1}(UL2(`)[1}RQYOOZ)(A_S.png

$content-fontcolor: #333;
$medium-fontColor: #666;
$light-fontColor: #999;
$content-notice-fontcolor: #777;
$content-bgColor: #F1F1F1;
$search-bgColor: #F5F5F5;
$search-fontColor: #B7B7B7;
$hightlight-fontColor: #E93B3B;
$btn-bgColor: #0091FF;
$bgColor: #FFF;
复制代码

👉 然后在Shop.vue和Content.vue中引入viriables.scss文件，并替换其中的颜色值。

import '../../style/viriables.scss'
复制代码

73JR79GLJ9E5E_9A0TFH@UW.png

😲 除了颜色值之外，商品部分的标题如果超长之后，需要隐藏超出部分，并且显示...

🤔 项目搭建的时候，我们也定义过一个mixins.scss的文件，里面就定义过超长的样式内容

VT(9Y(XW85K$)`7IZS@04)9.png

😁 所以我们直接在Content.vue文件中把mixins.scss引入进去使用即可。

@import "../../style/mixins.scss"
复制代码

👉 标题样式的部分使用mixins中的样式

&__title{
  margin: 0;
  line-height: .2rem;
  font-size: .14rem;
  color: $content-fontcolor;
  @include ellipsis
}
复制代码

$_$ON(}VZRG$ZX)SV_OZ~[D.png

😫 超长之后已经换到一行显示了，但是并没有隐藏超出的部分内容，这是因为我们没有给标题父元素样式

UWL24NPLXTI1CK0}94IEFFM.png

👉 将标题父元素detail的样式加上overflow:hidden

&__detail{
  overflow: hidden;
}
复制代码

QN}`L}G0{D8(}M~H8CI3[4D.png

内容联动

🌀 在确定接口之前，我们需要知道请求接口和返回数据都应该有些啥？

👆 请求接口的时候，需要根据tab栏的值去判断返回的数据

✌️ 需要带上对应的店铺ID去请求，这样就可以保证返回的数据是当前店铺的

商品请求mock接口

🌀 可以根据下面的截图去定义自己的mock接口数据

F{PE~%UVH41HB}VA80LSMN0.png

👉 请求接口必不可少的就是引入get函数和定义数据的方法

import { reactive, toRefs } from 'vue'
import { get } from '../../utils/request'
复制代码

👉 在setup函数中请求接口，把返回结果打印出来

const getContentData = async () => {
  const result = await get('/api/shop/1/products', { tab: 'all' })
  console.log(result.data)
}
getContentData()
复制代码

6Q5O86$MXA@AQMZRX~0}FCW.png

接口已经请求成功了，而且数据也返回回来了，下面就可以把数据赋值之后再DOM元素上循环展示出来。

👉 定义返回数据值。

const data = reactive({
  contentList: []
})
const getContentData = async () => {
  const result = await get('/api/shop/1/products', { tab: 'all' })
  if (result.data.code === 0 && result.data.data.length) {
    data.contentList = result.data.data
  }
}
getContentData()
const { contentList } = toRefs(data)
return { contentList }
复制代码

👉 页面上就不需要循环10次了，直接根据接口返回数据循环结果即可

<div class="product">
  <div class="product__item" v-for="item in contentList" :key="item._id">
    <img class="product__item__img" :src="item.imgUrl" />
    <div class="product__item__detail">
      <h4 class="product__item__title">{{item.name}}</h4>
      <p class="product__item__sales">月售 {{item.sales}} 件</p>
      <p class="product__item__price">
        <span class="product__item__yen">&yen;</span>{{item.price}}
        <span class="product__item__origin">&yen;{{item.oldPrice}}</span>
      </p>
    </div>
  </div>
</div>
复制代码

{C3Y3U{DY0[LK(WB{%N$U@R.png

tab栏数据

🌀 tab栏的数据可以根据实际情况来动态渲染，但是为了方便演示效果，我直接在setup函数中定义固定的几个数据即可。

const categories = [
  {
    name: '全部商品',
    tab: 'all'
  },
  {
    name: '秒杀',
    tab: 'seckill'
  },
  {
    name: '新鲜水果',
    tab: 'fruit'
  }
]
return { categories }
复制代码

👉 页面上就直接循环categories数组

<div class="category">
      <div class="category__item" v-for="item in categories" :key="item.tab">{{item.name}}</div>
</div>
复制代码

`VWRZ(S4PQ_H4EA3]ANHAJT.png

⭕️ 当点击tab栏的某一项时，需要给接口传递当前tab值，那么就得给tab栏点击事件，点击之后就要将当前tab值传递给接口方法

👉 添加点击事件，并传参

<div class="category">
    <div class="category__item"
        v-for="item in categories"
        :key="item.tab"
        @click="handleCategoryClick(item.tab)"
     >{{item.name}}</div>
</div>
复制代码

👉 接口方法接收参数

const getContentData = async (tab) => {
  const result = await get('/api/shop/1/products', { tab })
  if (result.data.code === 0 && result.data.data.length) {
    data.contentList = result.data.data
  }
}
const handleCategoryClick = (tab) => {
  getContentData(tab)
}
return { categories, contentList, handleCategoryClick }
复制代码

T8NMV`YD)7[BR3%$F(MIS(V.png

😲 接口已经根据tab值请求成功了，但是tab栏的样式并没有根据点击事件而变化。

⭕️ 给点击事件方法中定义一个数据接收tab值，并在DOM元素中判断是否和当前tab值相等即可展示选中的样式。

👉 定义当前点击tab的数据值，默认是第一个tab值

const data = reactive({
  currentTab: categories[0].tab,
  contentList: []
})
复制代码

👉 在点击事件的方法中接收并重新定义tab值

const handleCategoryClick = (tab) => {
  getContentData(tab)
  data.currentTab = tab
}
getContentData(data.currentTab)
const { contentList, currentTab } = toRefs(data)
return { categories, currentTab, contentList, handleCategoryClick }
复制代码

👉 DOM元素中判断选中的样式 I7]YNTH`6U1OIS(`9%UQX60.png

总结

本篇文章主要是把详情页中内容部分的联动功能实现了，而且把样式进行了优化，但是我们把逻辑部分都写在了setup函数中，还没有像以前首页、登录注册页面一样拆分出来，大家如果有兴趣可以自己拆分一下看看，下一篇会使用watchEffect方法进行拆分逻辑代码。

【Vue3从零开始-实战】S16：详情页样式优化及tab栏内容联动功能实现

前言

优化样式

内容联动

商品请求mock接口

tab栏数据

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景