vue 2.0 购物车小球抛物线的示例代码

本文介绍了vue 2.0 购物车小球抛物线的示例代码，分享给大家，具体如下：

备注：此项目模仿 饿了吗。我用的是最新的Vue, 视频上的一些写法已经被废弃了。

布局代码

<div class="ball-container"> <transition name="drop"       v-for="ball in balls"       @before-enter="beforeDrop"       @enter="dropping"       @after-enter="afterDrop">  <div v-show="ball.show" class="ball" v-bind:css="false">   <div class="inner inner-hook" ></div>  </div> </transition></div>

css代码（使用stylus写法）

.ball-container .ball  position fixed  left 32px  bottom 22px  z-index 200  transition all 0.4s cubic-bezier(0.49,-0.29,0.75,0.41)  .inner   width 16px   height 16px   border-radius 50%   background-color rgb(0,160,220)   transition all 0.4s linear

js代码

data() {  return {   balls : [    {     show: false    },    {     show: false    },    {     show: false    },    {     show: false    },    {     show: false    }   ],   dropBalls: []  };},   methods: {  drop(el) {   for(let i = 0; i < this.balls.length; i++) {    let ball = this.balls[i];    if(!ball.show) {     ball.show = true;     ball.el = el;     this.dropBalls.push(ball);     return ;    }   }  }  beforeDrop(el) {   let count = this.balls.length;   while (count--) {    let ball = this.balls[count];    if(ball.show) {     let rect = ball.el.getBoundingClientRect();     let x = rect.left - 32;     let y = -(window.innerHeight - rect.top - 22);     el.style.webkitTransform = `translate3d(0,${y}px,0)`;     el.style.transform = `translate3d(0,${y}px,0)`;     let inner = el.getElementsByClassName('inner-hook')[0];     inner.style.webkitTransform = `translate3d(${x}px,0,0)`;     inner.style.transform = `translate3d(${x}px,0,0)`;    }   }  }，  dropping(el) {   /* eslint-disable no-unused-vars */   let rf = el.offsetHeight;   this.$nextTick(() => {    el.style.webkitTransform = 'translate3d(0,0,0)';    el.style.transform = 'translate3d(0,0,0)';    let inner = el.getElementsByClassName('inner-hook')[0];    inner.style.webkitTransform = 'translate3d(0,0,0)';    inner.style.transform = 'translate3d(0,0,0)';   });  },  afterDrop(el){   let ball = this.dropBalls.shift();   if(ball) {    ball.show = false;    el.style.display = 'none';   }  }}

getBoundingClientRect()。方法请阅读这篇文章//www.Vevb.com/article/134208.htm

说明：

goods 是一个组件，里面包含menu(div) , foods(div), shopcart(购物车组件)。其中foods 包含cartcontrol(即小球组件)

组件之间的通信：说明：菜单和商品

第1个问题：小球，需要获取所点击的商品的数量。

利用Vue的props，将foods值传递给cartcontrol。但是这样有个问题。即子组件更新，无法同步回父组件。且，在子组件中，对food注册了一个count属性，此属性也无法同步回父组件(goods)。