（十四）商品详情页实现

在购物的时候，我们在打开goods页面的时候，每点击其中一种具体的food的时候，都会有一个商品的详情页，该页面就是介绍该商品的一些具体的细节。如下图所示：

图1

当我们点击红色框中的任意一个food的时候，都会有该商品详情页缓慢过渡进来，如下图所示

图2

当我们点击图2中左上角的向左箭头的时候，图2又隐藏掉，出现图1的界面。

当点击任意一种商品的时候，会出现商品的详情页，这个详情页可以独立成一个food组件，这个food组件的数据是来自goods组件的，所以要将<food>组件添加到goods组件中。

1、food.vue中<template>内容如下，food页面的显示和隐藏有一个动画的过程

<template><transition name="move"><!--每一种商品的详情页--><!--正常情况下这个组件是隐藏的--><div v-show="showFlag" class="food"><div class="foodContent"><div class="imageHeader"><img :src="food.image"><!--返回按钮,hide()将<food>组件隐藏--><div class="back" @click="hide"><span class="icon-arrow_lift"></span></div></div></div></div></transition>
</template>

2、food.vue中<script>中的内容如下

<script>export default {props:{//接收从父组件传递过来的数据foodfood:{type:Object}},data(){return {showFlag:false};},methods:{//将this.showFlag的值设为true//这个方法是给父组件调用的，当点击父组件的任意一个food区间，触发这个函数show(){this.showFlag = true;},//将this.showFlag的值设为falsehide(){this.showFlag = false;}}}
</script>

3、food.vue中的<template>中的<style>内容如下

<style lang="stylus">@import "../../common/stylus/mixin.styl".foodposition:fixedleft:0top:0bottom:48px   /*底部的购物车的高度是48px*/z-index:30width: 100%background:#ffftransform:translate3d(0,0,0)&.move-enter-active,&.move-leave-activetransition:all 0.2s linear&.move-enter,&.move-leave-activetransform :translate3d(100%,0,0).imageHeaderposition:relativewidth: 100%height:0              /*设置图片的宽度=高度*/padding-bottom:100%  /*相对于这个盒子的宽度设置的，其值=width*/imgposition:absolutetop:0left:0width: 100%height:100%.backposition: absolutetop:0left:0.icon-arrow_liftdisplay: blockpadding:10pxfont-size:20pxcolor:#fff
</style>

4、在父组件goods.vue中引进food.vue

5、在goods.vue中的<template>中引用<food>组件，注意在<template>下直系子元素只能有一个，否则会报错

在这里通过绑定属性:food="selectedFood"将选中的food对象传递给子组件food，ref="food"，通过this.$refs.food获取到<food>这个DOM元素，然后就可以在父组件里面调用子组件定义的方法了，具体如下：

首先，在goods.vue中的data()定义变量selectedFood，如下图所示：

这个selectedFood存放的是一个对象，表示被选中的food对象，通过点击相应的food，将food保存在selectedFood中，如下图所示：

selectFood(food,$event)在goods.vue中的methods中定义，主要有两个功能：将点击的food保存在selectedFood中；调用子组件<food>中的方法show()，显示商品详情页

        //将点击的相应的food放到数据this.selectedFood中，然后传递给子组件//其次调用子组件<food>在methods中定义的方法show()//这种方式定义的函数是可以被外部调用的selectFood(food,event){//不是自定义事件if(!event._constructed){return;}//将点击的food对象存放到this.selectedFood中this.selectedFood = food;// 在父组件中调用<food>中在methods定义的方法show()，显示商品详情页this.$refs.food.show();}

（十四）商品详情页实现相关推荐

谷粒商城高级篇 (十四) ---------- 商品详情
目录一.详情数据二.查询详情三.sku 组合切换四.关键 SQL 一.详情数据封装成 vo 如下: SkuItemVo: @Data public class SkuItemVo {//1. ...
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城（SSM前后端分离项目）十六（商品排序，Thymeleaf快速入门，商品详情页的展示）
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十六(商品详情页的展示) 一.商品排序 1.完善页面信息这是用来做排序的,默认按照综合排序 ...
商品详情页动态渲染系统：大型网站的多机房4级缓存架构设计
124_大型电商网站的商品详情页的深入分析之前,咱们也是说在讲解这个商品详情页系统的架构缓存架构,高可用服务商品详情页系统,我们只是抽取了其中一部分来讲解,而且还做了很大程度的简化主要是为了用 ...
商品详细信息的代码html_电商网站的商品详情页系统架构
小型电商网站的商品详情页系统架构小型电商网站的页面展示采用页面全量静态化的思想.数据库中存放了所有的商品信息,页面静态化系统,将数据填充进静态模板中,形成静态化页面,推入 Nginx 服务器.用户浏 ...
亿级商品详情页架构演进技术解密 | 高可用架构系列二
转载:http://mp.weixin.qq.com/s?__biz=MzAwMDU1MTE1OQ==&mid=210272034&idx=1&sn=3be9d2b53c7fe ...
亿级商品详情页架构演进技术解密 | 高可用架构系列
亿级商品详情页架构演进技术解密 | 高可用架构系列 --http://mp.weixin.qq.com/s?__biz=MzAwMDU1MTE1OQ==&mid=210272034&i ...
第七章 Web开发实战2——商品详情页
本章以京东商品详情页为例,京东商品详情页虽然仅是单个页面,但是其数据聚合源是非常多的,除了一些实时性要求比较高的如价格.库存.服务支持等通过AJAX异步加载加载之外,其他的数据都是在后端做数据聚合然后 ...
电商APP商品详情页设计套路（分层PSD模板）！透析UI／UE必须懂的营销设计思维！
电商APP重点在于商品详情页,打造一个优秀的商品详情页,完全能够提高转化率! UI设计.交互体验.文案撰写.产品的商业模式来聊一聊电商app商品详情页是怎么"套路" 设计app商品 ...
微信小程序微商城（五）：动态API实现商品详情页（下）
IT实战联盟博客:http://blog.100boot.cn 上一篇:微信小程序微商城(四):动态API实现商品详情页(上) 看效果加入购物车.gif 开发计划 1.加入购物车悬浮框.商品数量.价 ...
尚硅谷谷粒商城第十二天商品详情页及异步编排
1. 商品详情当用户搜索到商品,肯定会点击查看,就会进入商品详情页,接下来我们完成商品详情页的展示. 商品详情浏览量比较大,并发高,我们会独立开启一个微服务,用来展示商品详情. 1.1. 创建mod ...

（十四）商品详情页实现

（十四）商品详情页实现相关推荐

最新文章

热门文章