仿了么项目，商品详情页开发

桃扇骨 2023-06-05 08:26 11阅读 0赞

点击商品应该会跳转到商品详情页，在这里我们把商品详情页做成组件

在内部组件定义一个show方法来切换这个组件的显示

![1693641-20190910122040796-870333270.png][]

接下来要给外面的food添加一个点击事件，在点击的时候把数据传递给子组件在调用子组件自身的show方法

goods组件中顶一个数据叫被选中的商品

![1693641-20190910122220010-1746837017.png][]

给数据添加点击事件，并把food传递进去

![1693641-20190910122256143-1763615632.png][]

定义这个点击事件方法，并把值赋值给刚刚定义的变量selectedfood，再调用子组件的show方法（通过ref）

![1693641-20190910122356234-1975420709.png][]

传递数据：

![1693641-20190910122521397-1499393503.png][]

转载于:https://www.cnblogs.com/rmty/p/11502260.html

[1693641-20190910122040796-870333270.png]: /images/20230601/bd28b64fced2465987a9cf78c1e79a5a.png
[1693641-20190910122220010-1746837017.png]: /images/20230601/84d3ca2ca7c74c8fb173b6180d581f66.png
[1693641-20190910122256143-1763615632.png]: /images/20230601/867051379c3442b898f7820fcfd14de4.png
[1693641-20190910122356234-1975420709.png]: /images/20230601/67201bd01ff84530823b5d8b1080bf0a.png
[1693641-20190910122521397-1499393503.png]: /images/20230601/b8a1b85b29924c5bbe4f20648356a7bf.png

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

相关【畅购商城】详情页详情之商品详情

1.构建详情页步骤0：确定访问路径 > [http://localhost:3000/Goods?id=1][http_localhost_3000_Goods_id

﹏ヽ暗。殇╰゛Y/ 2024年04月01日 18:59/ 0 赞/ 122 阅读

相关第七章 Web开发实战2——商品详情页

本章以京东商品详情页为例，京东商品详情页虽然仅是单个页面，但是其数据聚合源是非常多的，除了一些实时性要求比较高的如价格、库存、服务支持等通过AJAX异步加载加载之外，其他的数据

电玩女神/ 2023年10月17日 14:06/ 0 赞/ 42 阅读

相关 19 Flutter仿京东商城项目商品详情底部浮动导航布局商品页面布局

效果： ![1057166-20190904073308702-2008654155.png][] widget/JdButton.dart import 'pa

Bertha 。/ 2023年08月17日 15:58/ 0 赞/ 96 阅读

相关 Vue仿饿了么app项目总结

前言这是我的第一个基于Vue项目的作品，目的是把之前的前端知识累积加上目前流行的前端框架，以项目的形式展示出来。大家在学习Vue的时候，可以将此项目作为学习Vue

柔光的暖阳◎/ 2023年07月11日 08:55/ 0 赞/ 100 阅读

相关仿了么项目，商品详情页开发

点击商品应该会跳转到商品详情页，在这里我们把商品详情页做成组件在内部组件定义一个show方法来切换这个组件的显示 ![1693641-20190910122040796-

桃扇骨/ 2023年06月05日 08:26/ 0 赞/ 12 阅读

相关实现商品详情页

实现了一个常用到的商品详情页，效果如下：关键代码如下： 1 pragma mark - 配置各个滚动视图的上拉和下拉操作 2 - (void)co

ゝ一纸荒年。/ 2023年03月13日 02:28/ 0 赞/ 37 阅读

相关商城项目---day07---首页静态文件和商品详情页

一：构建模版参数categories： 1：了解前端需要的格式： categories = { "1":{

港控/mmm°/ 2022年12月05日 05:14/ 0 赞/ 226 阅读

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

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

朴灿烈づ我的快乐病毒、/ 2022年05月25日 01:56/ 0 赞/ 312 阅读

相关商品详情页商品放大镜效果

源码下载地址：https://gitee.com/meijunna/lunbo html <!DOCTYPE html PUBLIC "-//W3C//DTD XH

骑猪看日落/ 2022年05月20日 02:50/ 0 赞/ 412 阅读

相关商品详情页上拉查看详情开源库

商品详情页上拉查看详情目录介绍 01.该库介绍 02.效果展示 03.如何使用 04.注意要点 05.优化问题 06.部分代码

骑猪看日落/ 2022年01月19日 22:49/ 0 赞/ 413 阅读