各位掘友,好久不见,最近利用工作之余开源了Vue电商项目,高仿某知名O2O买菜平台,整个项目做下来收获还是蛮多的,可以扫描下方二维码体验,本篇是项目的核心知识拆解篇,主要是拆解增加商品飞入购物车的实现过程。
点我体验
项目开源地址感谢点星+收藏
首先我先简单的介绍下本项目所用到的技术栈:
整个项目采用<强> vue-cli3 >强脚手架搭建,<强> Vue全家桶(Vue、vuex vue-router) 强>,<强> Vant UI框架强>以及很多著名好用的第三方库如:<强> axios 强>,<强> fastclick 强>,<强> better-scroll 强>,<强> twix。js 强>,<强> pubsub。js 强>,<强>的时刻。js 强>,<强> vue-amap 强>等等。像素单位选择<强> rem >强,后台数据接口通过<强> Easy-Mock >强搭建,以最接近企业开发的方式,组件化模块化,最大程度实现高内聚低耦合,大大提升各模块的可维护及可扩展性,相信读完源码和我写的系列拆解文章,无论你是哪个段位的攻城狮都会有所启发!开源不易,你的点赞就是对我最大的鼓励:恩:恩:感谢~谢谢# 9834;(& # 65381;ω& # 65381)& # 65417;
首先先来瞅瞅要做成的样子,是不是很炫酷:飞机:飞机:随手点赞支持下作者:心跳:
首先我们先来把关注点放到加入购物车这块,当我们点击购物车图标的时候,这个时候会在当前点击的商品图片的中央范围先出现个圆形的商品缩略图,其次这个商品缩略图会沿着当前位置以曲线的形式逐渐变小飞入到购物车里,当商品飞入到购物车时,购物车的数字图标会增加,同时购物车会出现弹簧动画。
通过上面大白话分析整个实现步骤可简短分为三个阶段来完成编码:
-
<李>第一阶段:点击购物车,出现一个商品缩略图的小球李>
<李>第二阶段:商品缩略小球以曲线形式从当前位置飞到底部购物车的位置李>
<李>第三阶段:当商品缩略小球完全消失在购物车位置时,购物车数量图标加1,且实现弹簧动画。李>
<强>第一阶段代码实现强>
第一阶段编码:绘制一个圆形的小球到商品的中间区域这个非常简单,就是在商品图片区域加一个<代码> div> 代码,设置<代码>位置:固定> 代码及宽度高度等,但是呢& # 63;
先埋个问题,如何让小球出现在点击当前商品的范围内呢& # 63;
<>强阶段一踩坑强>
起初我通过计算属性遍历了商品列表,在所有的商品视图中加入商品缩略图小球,然后,通过给每个商品列表里增加一个布尔属性<代码>显示> 代码,通过点击购物车图标来控制我刚创建的小球的显示与隐藏,然后自己就进入了死胡同,饶了半天,计算属性的数据通过<代码>设置> 代码方式改变后,Dom死活不听话就是不按套路出牌(因为计算属性存在数据缓存),于是不得已放弃此笨拙的办法。
<>强阶段一最终实现方案强>
上面踩坑是因为贪多,想一次性到位,提前加载所有商品的小球缩略图,然后通过点击购物车来控制当前商品缩略图的显示与隐藏。那么我们要不换一种思路,仅创建一个缩略小球怎么样,通过<代码>布尔> 代码来控制它的显示和隐藏,位置动态变化,点击哪个商品就让他显示到哪个商品的范围内,并且每次点击给他设置个真实的属性丢到一个数组中。好,我们先在数据中定义小球是否显示的属性及显示小球的数组
数据(){ 返回{ showMoveDot:[],//控制下落的小圆点显示隐藏 }
,
然后我们在点击购物车的时候来给<代码> showMoveDot> 代码数组动态增加属性,然后在Dom中遍历这个数组,双向绑定,最后通过<代码> v> 代码来控制显示和隐藏,这样是不是非常妙~ ~
点击购物车给<代码> showMoveDot 代码>增加真正<代码> 代码>的属性
方法:{ addToCart(产品、num) { 这一点。showMoveDot=[…]。showMoveDot,真]; } } >之前,
Dom中遍历<代码> showMoveDot> 代码,并且通过<代码> v> 代码来控制商品缩略小球的显示
Vue实现商品飞入购物车效果(电商项目)