快捷導(dǎo)航

vue 2.0 購物車小球拋物線的示例代碼

更新時間：2018年02月01日 15:28:57 作者：心無私天地寬

本篇文章主要介紹了vue 2.0 購物車小球拋物線的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

本文介紹了vue 2.0 購物車小球拋物線的示例代碼，分享給大家，具體如下：

備注：此項(xiàng)目模仿餓了嗎。我用的是最新的Vue, 視頻上的一些寫法已經(jīng)被廢棄了。

布局代碼

<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()。方法請閱讀這篇文章http://chabaoo.cn/article/134208.htm

說明：

goods 是一個組件，里面包含menu(div) , foods(div), shopcart(購物車組件)。其中foods 包含cartcontrol(即小球組件)

組件之間的通信：說明：菜單和商品

第1個問題：小球，需要獲取所點(diǎn)擊的商品的數(shù)量。

利用Vue的props，將foods值傳遞給cartcontrol。但是這樣有個問題。即子組件更新，無法同步回父組件。且，在子組件中，對food注冊了一個count屬性，此屬性也無法同步回父組件(goods)。

解決方法：

導(dǎo)入全局的Vue。

利用Vue.set(target,key,value); 對 target注冊count;

第2個問題：小球點(diǎn)擊，將所點(diǎn)擊過的商品數(shù)目傳遞給 shopcart。

在goods的 computed:{} 定義一個方法，將該方法以props的方式，傳遞給shopcart。

因?yàn)?，shopcart，對傳遞過去的數(shù)據(jù)僅數(shù)據(jù)運(yùn)算（不會改變）。因此不用同步會父組件。

第3個問題：購物車小球做拋物線運(yùn)動。

對于購物車小球做拋物線運(yùn)動。首先，落點(diǎn)都在購物車，小球則是隨機(jī)的。要做拋物線運(yùn)動，就要獲取，所點(diǎn)擊的 + 號的x,y位置。其次，拋物線運(yùn)動，只有在enter--> enter-to這段期間有，在leave--> leave-to 期間是沒有的，因此，需要用Vue提供的鉤子函數(shù)。

獲取 + 號x,y 位置：

小球（cartcontrol）是子組件。需要把數(shù)據(jù)傳遞給 goods(父組件)?？梢允褂肰uex,或者直接使用事件總線。對于餓了嗎demo。直接使用事件總線。

創(chuàng)建一個空的Vue。在 cartcontrol 中，通過 Bus.$emit(key, ... arg); 注冊一個監(jiān)聽，然后再父組件通過Bus.$on(key, function(... arg));監(jiān)聽此方法。將所操作的 dom 對象傳遞過去即可

Vue提供的鉤子

這里要說明一點(diǎn)，Vue在他的官網(wǎng)，對于只有過度的js，done是必須的，當(dāng)我加上done的時候，after-enter方法無法被執(zhí)行。
還有1個問題，Vue官網(wǎng)推薦，只有過度效果，在做過度動畫的元素上加上v-bind:class='false'。之前沒加，出現(xiàn)了，小球只能在第1次點(diǎn)擊的地方做過度效果。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: