本文介紹了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()。方法請閱讀這篇文章//m.survivalescaperooms.com/article/134208.htm
說明：
goods 是一個組件，里面包含menu(div) , foods(div), shopcart(購物車組件)。其中foods 包含cartcontrol(即小球組件)
組件之間的通信：說明：菜單和商品
第1個問題：小球，需要獲取所點擊的商品的數量。
利用Vue的props，將foods值傳遞給cartcontrol。但是這樣有個問題。即子組件更新，無法同步回父組件。且，在子組件中，對food注冊了一個count屬性，此屬性也無法同步回父組件(goods)。
解決方法：
導入全局的Vue。
利用Vue.set(target,key,value); 對 target注冊count;
第2個問題：小球點擊，將所點擊過的商品數目傳遞給 shopcart。
在goods的 computed:{} 定義一個方法，將該方法以props的方式，傳遞給shopcart。
因為，shopcart，對傳遞過去的數據僅數據運算（不會改變）。因此不用同步會父組件。
第3個問題：購物車小球做拋物線運動。
對于購物車小球做拋物線運動。首先，落點都在購物車，小球則是隨機的。要做拋物線運動，就要獲取，所點擊的 + 號的x,y位置。其次，拋物線運動，只有在enter--> enter-to這段期間有，在leave--> leave-to 期間是沒有的，因此，需要用Vue提供的鉤子函數。
獲取 + 號x,y 位置：
小球（cartcontrol）是子組件。需要把數據傳遞給 goods(父組件)。可以使用Vuex,或者直接使用事件總線。對于餓了嗎demo。直接使用事件總線。
創建一個 空的Vue。在 cartcontrol 中 ，通過 Bus.$emit(key, ... arg); 注冊一個監聽，然后再父組件 通過Bus.$on(key, function(... arg));監聽此方法。將所操作的 dom 對象傳遞過去即可
Vue提供的鉤子
這里要說明一點，Vue在他的官網，對于只有過度的js，done是必須的，當我加上done的時候，after-enter方法無法被執行。
還有1個問題，Vue官網推薦，只有過度效果，在做過度動畫的元素上加上v-bind:class='false'。之前沒加，出現了，小球只能在第1次點擊的地方做過度效果。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
