仿饿了么项目，右侧商品组件动画，以及和购物车组件的联动效果，小球掉落效果...

淩亂°似流年 2023-06-05 08:26 82阅读 0赞

要实现这个组件的效果，以及和底部购物车联动的效果

![1693641-20190905203929379-243315786.png][]

这个组件能获取父组件foods上每个商品的数据，而且点击增加可以增加，点击删除可以删除

新建一个组件叫做cartcontrol，因为每一道菜都应该有这个组件，所以在goods父组件循环遍历goods出的food中把每一项food传递到子组件中去

![1693641-20190905200823777-1358357993.png][]

在这个组件中接收food，是一个对象

![1693641-20190905200959382-1698905401.png][]

写好这个组件的骨架，并且给他添加点击事件，并根据是商品的数量来决定是否显示

![1693641-20190905201924174-2031309698.png][]

编写这个业务组件的逻辑方法还是比较简单的，但是在这其中踩了两个坑

一个是food.count外部传递进来的food中并没有这个字段，所以引用了全局vue中的接口set方法，给其新增一个count字段

另一个是外部的food因为也引用了better-scroll，要使用点击事件要在better-scroll初始化构造函数时候设置click为true

![1693641-20190905204853364-2017677617.png][]

到这里最基本的业务逻辑已经over了，接下来给这个组件增加一些动画，让其不那么生硬

![1693641-20190905201635394-1063919622.png][]

暂时的动画方案是点击增加按钮的时候左侧减号按钮滚动至右边，因为要做这个效果所以得把左边组件给拆分开来

![1693641-20190905202017863-1123024877.png][]

外部做平移动画，内部做滚动动画，在外面给他套上一个transition层来添加过度动画，编写的less如下

![1693641-20190905202640355-1519151576.png][]

到这里就完成了动画的编写，去浏览器上测试一下效果

![1693641-20190905202731219-1417246020.gif][]

之前我们通过vue.set方法给商品添加了count属性，因此改变的food数据传递到了外部组件，就可以在food组件中使用一个selectFoods方法获取这些被选中的数据

在food组件中新增加一个计算属性，通过双重循环遍历出被选中food的数据：

![1693641-20190905205237076-1725622994.png][]

传递到购物车组件中替换掉之前模拟被选择的数据

![1693641-20190905203208865-112185412.png][]

好啦，到这里这个组件就完成了，并且做到了和底部购物车的联动

![1693641-20190905203756419-1810452902.gif][]

接下来再完善一下这个组件，给这个点击事件添加一个抛物线动画，点击以后让其能够抛送到购物车中

![1693641-20190905205421356-1406241818.png][]

这个动画比较复杂，因为每个小球的距离顶部的高度都不同，而且用户多次点击，就会有多次飞入的效果

首先是点击添加商品按钮，要给他派发一个事件传递到父组件中去：

在cartcontrol组件的添加方法，通过$emit派发到父组件中去

![1693641-20190906155158371-348671840.png][]

goods父组件中接收：

![1693641-20190906155256352-89164606.png][]

再获取到购物车的DOM元素：

![1693641-20190906155353350-1215295834.png][]

这样就可以在购物车组件中获取到cartcontrol子组件传递过去的数据了

![1693641-20190906155406707-1086118402.png][]

在shopcart中添加一个drop方法：

![1693641-20190906155526352-421796704.png][]

给其定义一个球的数组存放做动画的球，还有一个已经掉落球的数组

![1693641-20190906155537837-1311157359.png][]

小球动画给他三个动画事件钩子

![1693641-20190906155747538-1814871353.png][]

完善drop方法：

![1693641-20190906155933355-325415742.png][]

实现这三个动画钩子

![1693641-20190906155946616-928815466.png][]

样式如下：

![1693641-20190906160013185-1765996776.png][]

在这里就完成了小球掉落的动画效果

![1693641-20190906160132020-810056125.gif][]

代码已上传至码云：

https://gitee.com/delisteam/ele-app-cart

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

[1693641-20190905203929379-243315786.png]: /images/20230601/c8a00df3159b48f296cea4ae83872ee8.png
[1693641-20190905200823777-1358357993.png]: /images/20230601/3175ecbb47fc43ae819eb0815be2c2a6.png
[1693641-20190905200959382-1698905401.png]: /images/20230601/81290f293fa34b6aa4e4bf781984da04.png
[1693641-20190905201924174-2031309698.png]: /images/20230601/d3a99ec02a144a57965ac80a56645ca5.png
[1693641-20190905204853364-2017677617.png]: /images/20230601/830afd7150fe427684563c3494c27a3e.png
[1693641-20190905201635394-1063919622.png]: /images/20230601/65f39012c2794a35b73a6573a0bb7193.png
[1693641-20190905202017863-1123024877.png]: /images/20230601/e2d67bc99cf94ef6b2ec9cf1b0b06208.png
[1693641-20190905202640355-1519151576.png]: /images/20230601/6a4ea1c23d5a440e97798cb97c540e55.png
[1693641-20190905202731219-1417246020.gif]: /images/20230601/889fe68c4d4a42a287ac56ca570832ea.png
[1693641-20190905205237076-1725622994.png]: /images/20230601/d40924e580764f3382596f8a67281bf2.png
[1693641-20190905203208865-112185412.png]: /images/20230601/8531704f628148a9839f2a118a7da6e9.png
[1693641-20190905203756419-1810452902.gif]: /images/20230601/5373b34a65ba41b68c41f2feb0576f12.png
[1693641-20190905205421356-1406241818.png]: /images/20230601/a86880607cd5440d9f4ae184c5ddc5fe.png
[1693641-20190906155158371-348671840.png]: /images/20230601/6cbaeb5d654942ccb3848cb036db014d.png
[1693641-20190906155256352-89164606.png]: /images/20230601/7c9dc811dfa74135a2946f527d805f41.png
[1693641-20190906155353350-1215295834.png]: /images/20230601/912e7fdab05a409e84459f072d3cde04.png
[1693641-20190906155406707-1086118402.png]: /images/20230601/83a2301d8dfc4426a3c700f655a15edb.png
[1693641-20190906155526352-421796704.png]: /images/20230601/af7d51d50c9747aeb41945c4ffabfddc.png
[1693641-20190906155537837-1311157359.png]: /images/20230601/b54e9f888c5e4ee08c837c7cded6d19d.png
[1693641-20190906155747538-1814871353.png]: /images/20230601/0eb7387aa21040c3a77adf7405e43cdf.png
[1693641-20190906155933355-325415742.png]: /images/20230601/cf6e23c3e70c4dd1bd7c6298ee54ce35.png
[1693641-20190906155946616-928815466.png]: /images/20230601/96c00fd5751e4f5297867321f437b4ed.png
[1693641-20190906160013185-1765996776.png]: /images/20230601/31dfcfe29df74681bdf670f28680bc3b.png
[1693641-20190906160132020-810056125.gif]: /images/20230601/95c2a7e8c851443b8708ef7de671be91.png