本篇文章主要介紹了vue 2.0 購物車小球拋物線的範例程式碼,現在分享給大家,也給大家做個參考。
本文介紹了vue 2.0 購物車小球拋物線的範例程式碼,分享給大家,具體如下:
備註:此專案模仿 餓了嗎。我用的是最新的Vue, 影片上的一些寫法已經被廢棄了。
佈局程式碼
<p class="ball-container"> <transition name="drop" v-for="ball in balls" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop"> <p v-show="ball.show" class="ball" v-bind:css="false"> <p class="inner inner-hook" ></p> </p> </transition> </p>
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()。方法請閱讀這篇文章http://www.jb51.net/article/134208.htm
說明:
goods 是一個元件,裡麵包含menu(p) , foods(p ), 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,對傳遞過去的資料僅資料運算(不會改變)。因此不用同步會父組件。第五個問題:購物車小球做拋物線運動。
對於購物車小球做拋物線運動。首先,落點都在購物車,小球則是隨機的。要做拋物線運動,就要獲取,所點擊的 號的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次點擊的地方做過度效果。
以上是在vue 2.0中如何實現購物車小球拋物線的詳細內容。更多資訊請關注PHP中文網其他相關文章!