fixed 宽度超过内容页面_vue商品详情页面的实现（3.9）

请叫我铁牛

于 2020-12-31 00:44:28 发布

阅读量113

点赞数

CC 4.0 BY-SA版权

文章标签： fixed 宽度超过内容页面

本文链接：https://blog.csdn.net/weixin_31736005/article/details/112199861

本文档介绍如何在Vue.js项目中创建商品详情页面。首先，通过创建goodtransition组件定义页面过渡效果，利用v-show和showFlag控制显示隐藏，并结合BScroll处理滚动。接着，展示商品信息，包括名称、销量、评分等，并处理评论数据。同时，定义了showView()、closeView()和addFirst()方法，分别用于显示、关闭页面及添加商品到购物车。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上次我们实现购物车的详情页面，这篇我们继续推进项目，来实现商品详情页面。

商品详情页面的实现

在开始之前我们先看它在页面中的样子：

在首页点击某一商品会展示商品的详细信息。如下图所示：

一创建good组件

创建一个组件 good

transition 来定义页面展示的形式；
使用v-show与变量showFlag来控制显示与隐藏，ref配合BScroll控制页面的滑动；
现在结构内出现的数据的引用我们在script内进行处理。

`{{food.name}}`

{{food.month_saled_content}}

              
              v-show="food.product_label_picture"
              :src="food.product_label_picture"
            >

￥{{food.min_price}}/{{food.unit}}

选规格

{{food.rating.title}}
                (
                {{food.rating.like_ratio_desc}}{{food.rating.like_ratio}}
                )

{{food.rating.snd_title}}

{{comment.user_name}}

{{comment.comment_time}}

{{comment.comment_content}}

二处理数据，行为

通过data监听showFlag的状态；
通过props传入父组件循环Foods而得到的food数据；
方法showView()可以被父组件调用，稍后说明调用形式；
方法closeView()绑定在模板退出图标上，用于关闭页面，重置变量showFlag为false；
方法addFirst()用来添加一个商品数量；