技术博客
首页 所有文章 标签 分类 关于
技术博客

目录

商品详情页

 收录于 未分类
   约 178 字   预计阅读 1 分钟 
https://bing.ee123.net/img/rand?artid=146283648

商品详情页

1.创建分支

https://i-blog.csdnimg.cn/direct/44632acdcd6d4966834112ef30352510.png

2获取商品详情的数据

https://i-blog.csdnimg.cn/direct/918c63abb2b3482e9389b774ac3a0b30.png https://i-blog.csdnimg.cn/direct/8e881de084d64c3295a3802a100e90a2.png

3渲染商品详情页的UI结构

3.1渲染轮播图区域

https://i-blog.csdnimg.cn/direct/0cbe7d687e0445ccbd04310eeac884f0.png https://i-blog.csdnimg.cn/direct/b312ee45c50e4f84933883d838ea163c.png

3.2实现轮播图预览效果

https://i-blog.csdnimg.cn/direct/72c5c04a332642ecbfeb9c136ad9bdf6.png https://i-blog.csdnimg.cn/direct/ecafa07b71d94700aecba1ca08be7d94.png

3.3渲染商品信息区域

https://i-blog.csdnimg.cn/direct/7a599bf7a8604a3bbe3c48dfa7516c41.png https://i-blog.csdnimg.cn/direct/3e670f81c4644a58839c303a46617971.png

3.4渲染商品详情信息

可以在小程序页面渲染出HTML对应的字符串 https://i-blog.csdnimg.cn/direct/f9e3ab2510c249b2b249931e753d255c.png https://i-blog.csdnimg.cn/direct/0058656dc12f48ca993ad70d1e15b145.png https://i-blog.csdnimg.cn/direct/eba8c2bdcbf8412c8fc89a89dde7b1f3.png 解决图片底部空白间隙的问题 (g) 代表全局替换 https://i-blog.csdnimg.cn/direct/dbf25a740d7941f5b43b0b27605815da.png https://i-blog.csdnimg.cn/direct/aec8cee0144049bfa45e80267cec6a16.png

3.5渲染商品导航区域的UI结构

基于 uni-ui 提供的 GoodsNav 组件来实现商品导航区域的效果 https://i-blog.csdnimg.cn/direct/ea0c95bf0442484f9e79249f91982765.png https://i-blog.csdnimg.cn/direct/8318b85bc3254de1b105be96b35f4597.png https://i-blog.csdnimg.cn/direct/2e556b445c904a0c8e70629570c999fe.png https://i-blog.csdnimg.cn/direct/9879417f83a2421a8129eee183b364a1.png

3.6点击跳转到购物车页面

https://i-blog.csdnimg.cn/direct/b61fe544d9c84758a2c2bfd2e2302d3b.png https://i-blog.csdnimg.cn/direct/bbf2eb7b4383424aa018ea72d2bc7205.png https://i-blog.csdnimg.cn/direct/92a044a1bfc64849a5d595012315bf38.png

4分支的合并与提交

https://i-blog.csdnimg.cn/direct/5f79991cb596463ca79f7245b828c517.png https://i-blog.csdnimg.cn/direct/494bd2242c0648f0a5b708a8bc2d5f7e.png

更新于 2025-03-16
 Json
返回 | 主页