vue电商项目(四)——开发Detail页面

目录

一、页面开发初始化

1、开发前准备

 2、路由跳转

3、滚动行为

二、获取数据

1、准备好API接口

2、仓库三连环

3、发送dispatch,将数据渲染到组件

 三、完成页面渲染业务

1、通过计算属性简化数据

2、ZOOM放大镜

(1)解决数据未返回假报错

(2) 完成轮播图

(3)放大镜相关业务

3、购买产品个数业务

4、加入购物车

---

一、页面开发初始化

1、开发前准备

我们先将准备好的页面复制到pages中。由于此组件还没有配置路由，我们应该配置路由

 2、路由跳转

我们在设置路由的时候提前占位，为了传递params参数。这里我们直接点击图片即可跳转。

并在通过<router——link><router——link>进行跳转的时候将产品的ID一起带过去。

3、滚动行为

页面一跳转到detail页面的时候，滚轮应该是在最顶部，但是这里却不是，我们这里就要用到路由的滚动行为，scrollBehavior。

注意：为了方便使用，我们将配置的路由单独放在一个文件夹内然后引入使用即可。

二、获取数据

1、准备好API接口

2、仓库三连环

3、发送dispatch,将数据渲染到组件

 三、完成页面渲染业务

1、通过计算属性简化数据

为了防止数据未返回前页面渲染的时候未得到数据而报错，所以我们至少要返回一个空数组

 通过mapGetters获取数据到页面

然后就是根据数据渲染放大镜上部和左边的数据，这里就不进行记录了

2、ZOOM放大镜

(1)解决数据未返回假报错

数据未返回的时候会报错。

(2) 完成轮播图

轮播图的数据是父组件给的，所以数据已经回来了，所以我们只要保证页面渲染完成就可以new Swiper了，这里依然采用watch + $nextTick

这里还需要将点击图片的时候将索引值值传递给兄弟组件，这里我么用的是全局事件总线。

兄弟组件收到index值，通过改变响应式数据从而改变大图的显示。

(3)放大镜相关业务

通过refs拿到遮罩层和大图，计算出遮罩层和大图的left和top

 js操作

这里需要注意的就是计算出来的结果需要 加上“px”,这里计算宽度右边距范围的时候记得有一个隐形的条件就是遮罩层的宽度是大盒子宽度的一半，如果不加入这个条件，则无法理解这个范围条件。