添加商品详情页的编译模式
在这里插入图片描述

获取商品详情数据
在这里插入图片描述

在这里插入图片描述

渲染商品详情页的UI结构
渲染轮播图区域
在这里插入图片描述

在这里插入图片描述

实现轮播图预览效果
在这里插入图片描述

渲染商品信息区域
在这里插入图片描述

美化商品信息区域的样式

为了立即查看修改过后的样式

在这里插入图片描述

可以分离窗口，在固定窗口在最前面

在这里插入图片描述

渲染商品的图文数据

在这里插入图片描述

需要用到小程序的一个组件
rich-text

在这里插入图片描述

在这里插入图片描述

重点是：通过nodes属性可以渲染html这样的标签

解决图文详情中图片底部空白间隙的问题

在这里插入图片描述

我们需要对接口返回的数据做一下改造
使用字符串的replace()方法，为img标签添加行内的style样式，从而解决图片底部空白间隙的问题

在这里插入图片描述

解决图文效果不能在ios设备上显示的问题

（测试的时候是可以显示的）

在这里插入图片描述

是因为有些图片的格式是.webp，这种格式的图片在iOS设备不能很好的被展示
我们可以通过正则将接口返回数据里面的.webp改成.jpg。（文件服务器上面有各种格式的图片）

在这里插入图片描述

解决商品价格闪烁的问题

现象：编译之后的一瞬间，商品的价格显示为：undefind
导致问题的原因：
	在商品详情数据请求回来之前，data中goods_info的值为}，因此初次渲染页面时，会导致商品价格、商品名称等闪烁的问题。
解决方案：
	判断goods_info.goods_name属性的值是否存在，从而使用v-if指令控制页面的显示与隐藏

在这里插入图片描述

渲染详情页底部的商品导航区域

基于uni-ui提供的GoodsNav组件来实现商品导航区域的效果

在这里插入图片描述

在这里插入图片描述

现在给这个组件一个固定定位

在这里插入图片描述

现在商品导航区域在最底部显示了，但是遮盖了一部分商品信息，可以改这个页面加一个下padding，往上面挤这个高度

在这里插入图片描述

在这里插入图片描述

自定义商品导航区域的按钮信息

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

点击跳转到购物车页面

1.点击商品导航组件左侧的按钮，会触发uni-goods-nav的@c1ick事件处理函数，事件对象e中会包含当前点击的按钮相关的信息

在这里插入图片描述

2.根据e.content.text的值，来决定进一步的操作

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

# uni-app
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

【GaussDB】GaussDB 常见问题及解决方案汇总

avatar 华为开发者空间
cover

华为云码道×仓颉实战：零基础开发你的专属音乐编辑器

avatar 华为开发者空间
cover

【GaussDB】基于SpringBoot实现操作GaussDB(DWS)的项目实战

avatar 华为开发者空间