项目总结：vue.js2.5饿了么APP（4）主要组件实现 - 购物车相关组件（下）

说明：本总结来源于慕课网 @ustbhuangyi老师的课程《Vue.js2.5+cube-ui重构饿了么App》课程，本博客做了项目总结梳理便于回顾，需要学习的伙伴可以移步学习。与君共勉！

之前章节传送： 

项目总结：vue.js2.5饿了么APP（1）概述+项目准备 

项目总结：vue.js2.5饿了么APP（2）主要组件实现 - 头部相关组件

项目总结：vue.js2.5饿了么APP（3）主要组件实现 - 购物车相关组件（上）

购物车组件主要包含（shop-cart ,shop-control , shop-cart-list , shop-cart-sticky）4个部分，本节主要讲解后两个，以及一些购物车相关优化设计 。

---

速看

shop-cart-list组件+shop-cart-sticky组件  当购物车中有商品时，点击购物车会弹出购物车详细内容，列表限制高度并可以滚动。（起初一期时没有将这一部分抽离出来，因此就在shop-cart组件的后半部分，通过一个标记来控制区块显示）二期，对于这种弹层类组件选择使用cube-ui的组件实现，并将其设置为API调用，设置hide() show()方法来控制蒙层显示。

但是有个问题：shop-cart-list是API组件，会动态的向body中挂载结点，因此层级较高，高过内层组件层级。但是购物车组件是一个子组件，因此会遮盖到原来的购物车组件（这个组件有个向上突出的部分）。由于无法调整层级，解决方法就是：使用shop-cart-sticky组件。动态向body中挂载一个购物车组件的副本。

并且这一部分还要加入的功能有：（加入购物车的小球动画，结算，清空购物车）对于小球下落动画，可以调用cart-control的drop方法，两个弹出dialog的操作都使用了cube-ui中的dialog组件。而对于切换tab的购物车联动问题，只需要在请求数据之前判断是否已经拿到数据。

最后，对于header和shop-cart-list的弹层组件中都用到的hide() show() 方法用mixin抽离出来做代码简化。

---

目录

一、购物车详情shop-cart-list组件（二期）

1. 概述

2. 布局

3. 实现

（1）popup组件使用

（2）过渡动画

 （3）列表滚动

（4）组件的使用

（5）添加弹出触发方法

（6）存在的问题

（7）商品购买时小球飞入动画

 （8）清空购物车

（9）结算按钮

（10）公共部分mixin抽离

（11）滑动页面购物车关联

二、购物车详情shopcart-list区块（一期）

1. 概述

2. 布局

3. 实现

（1）实现组件显示隐藏

（2）实现动画

 （3）蒙层的实现

三、shop-cart-sticky组件

1. 概括

2. 布局

3. 实现

四、createAPI详解

 

---

一、购物车详情shop-cart-list组件（二期）

1. 概述

当购物车中有商品时，点击购物车会弹出购物车详细内容，列表限制高度并可以滚动。（起初一期时没有将这一部分抽离出来，因此就在shop-cart组件的后半部分，通过一个标记来控制区块显示）二期，对于这种弹层类组件选择使用cube-ui的组件实现，并将其设置为API调用，设置hide() show()方法来控制蒙层显示。但是有个问题：shop-cart-list是API组件，会动态的向body中挂载结点，因此层级较高，高过内层组件层级。但是购物车组件是一个子组件，因此会遮盖到原来的购物车组件（这个组件有个向上突出的部分）。由于无法调整层级，解决方法就是：使用shop-cart-sticky组件。动态向body中挂载一个购物车组件的副本。

并且这一部分还要加入的功能有：（加入购物车的小球动画，结算，清空购物车）对于小球下落动画，可以调用cart-control的drop方法，两个弹出dialog的操作都使用了cube-ui中的dialog组件。而对于切换tab的购物车联动问题，只需要在请求数据之前判断是否已经拿到数据。

最后，对于header和shop-cart-list的弹层组件中都用到的hide() show() 方法用mixin抽离出来做代码简化。

2. 布局

当购物车中有商品时，点击购物车会弹出购物车详细内容。

布局：顶部是一个标题区+列表（有一个最大高度，超过最大高度列表可以滚动，如果列表高度不满足最大高度，只能被列表自身的高度撑高）

                                                                                                      

                                                                                           

                          

使用cube-scroll组件实现列表滚动，并且其中添加shop-control组件做商品的购买。

使用cube-ui将购物车组件变成一个createAPI模块的调用，并使用cube-popup弹层组件

3. 实现

（1）popup组件使用

组件是所有弹层组件的