首頁  >  文章  >  web前端  >  在vue 2.0中如何實現購物車小球拋物線

在vue 2.0中如何實現購物車小球拋物線

亚连
亚连原創
2018-06-08 14:11:071870瀏覽

本篇文章主要介紹了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(&#39;inner-hook&#39;)[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 = &#39;translate3d(0,0,0)&#39;;
    el.style.transform = &#39;translate3d(0,0,0)&#39;;
    let inner = el.getElementsByClassName(&#39;inner-hook&#39;)[0];
    inner.style.webkitTransform = &#39;translate3d(0,0,0)&#39;;
    inner.style.transform = &#39;translate3d(0,0,0)&#39;;
   });
  },
  afterDrop(el){
   let ball = this.dropBalls.shift();
   if(ball) {
    ball.show = false;
    el.style.display = &#39;none&#39;;
   }
  }
}

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中如何實作父元件點擊觸發子元件事件

vue中呼叫methods的方法

Javascript的日常錯誤

以上是在vue 2.0中如何實現購物車小球拋物線的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn