星空食堂
项目描述:这是一个网上点餐的外卖项目,功能包括账号登录、购物车和商店详情等模块。
技术栈:vue2 + vuex + vue-router + webpack + ES6/7 + fetch + less + svg
项目职责:负责前台页面部分功能的开发
项目难点及解决方案:
一.购物车功能的开发
该功能的难点:
1.有多个组件会添加删除购物车中的商品
该功能主要通过 vuex 做一个数据共享,通过计算属性获取该商店的购物车数据,再通过 watch 监听该计算属性,
只要变化,便重新获取购物车改变过的数据,包括商品数量、商品总价格等。
2.在商店页添加商品时,有一个动画效果,添加商品的按钮图片会移动到购物车区域,通知用户该商品被添加了
因为添加商品短时间内可能会出现多次,所以维护了一个布尔数组,用于表示小圆点是否完成下落动作。商品信息
为一个单独的组件,添加商品时,获取该元素的坐标,发送该坐标及布尔数组。父组件通过在 transition 内置组件中循环
这个布尔数组生成多个小圆点动画
二.封装运动函数
该函数根据传入运动对象,属性,速度,运动模式等参数,完成运动对象的属性变化。