各位掘友,好久不見(jiàn),最近利用工作之余開源了Vue電商項(xiàng)目,高仿某知名O2O買菜平臺(tái),整個(gè)項(xiàng)目做下來(lái)收獲還是蠻多的,可以掃描下方二維碼體驗(yàn),本篇是項(xiàng)目的核心知識(shí)拆解篇,主要是拆解增加商品飛入購(gòu)物車的實(shí)現(xiàn)過(guò)程。

點(diǎn)我體驗(yàn)

項(xiàng)目開源地址 感謝點(diǎn)星+收藏

首先我先簡(jiǎn)單的介紹下本項(xiàng)目所用到的技術(shù)棧:

整個(gè)項(xiàng)目采用 vue-cli3 腳手架搭建, Vue全家桶(vue、vuex、vue-router) 、 Vant UI框架 以及很多著名好用的第三方庫(kù)如: axios 、 fastclick 、 better-scroll 、 twix.js 、 pubsub.js 、 moment.js 、 vue-amap 等等。 像素單位選擇 rem ,后臺(tái)數(shù)據(jù)接口通過(guò) Easy-Mock 搭建,以最接近企業(yè)開發(fā)的方式,組件化模塊化,最大程度實(shí)現(xiàn)高內(nèi)聚低耦合,大大提升各模塊的可維護(hù)及可擴(kuò)展性,相信讀完源碼和我寫的系列拆解文章,無(wú)論你是哪個(gè)段位的攻城獅都會(huì)有所啟發(fā)!開源不易,你的點(diǎn)贊就是對(duì)我最大的鼓勵(lì):tada::tada:感謝~Thanks♪(･ω･)ﾉ

二、增加商品飛入購(gòu)物車實(shí)現(xiàn)過(guò)程

首先先來(lái)瞅瞅要做成的樣子,是不是很炫酷:airplane::airplane:隨手點(diǎn)贊支持下作者:heartbeat:

實(shí)現(xiàn)思路

首先我們先來(lái)把關(guān)注點(diǎn)放到加入購(gòu)物車這塊,當(dāng)我們點(diǎn)擊購(gòu)物車圖標(biāo)的時(shí)候,這個(gè)時(shí)候會(huì)在當(dāng)前點(diǎn)擊的商品圖片的中央范圍先出現(xiàn)個(gè)圓形的商品縮略圖,其次這個(gè)商品縮略圖會(huì)沿著當(dāng)前位置以曲線的形式逐漸變小飛入到購(gòu)物車?yán)?當(dāng)商品飛入到購(gòu)物車時(shí),購(gòu)物車的數(shù)字圖標(biāo)會(huì)增加,同時(shí)購(gòu)物車會(huì)出現(xiàn)彈簧動(dòng)畫。

通過(guò)上面大白話分析整個(gè)實(shí)現(xiàn)步驟可簡(jiǎn)短分為三個(gè)階段來(lái)完成編碼:

• 第一階段:點(diǎn)擊購(gòu)物車,出現(xiàn)一個(gè)商品縮略圖的小球
• 第二階段:商品縮略小球以曲線形式從當(dāng)前位置飛到底部購(gòu)物車的位置
• 第三階段:當(dāng)商品縮略小球完全消失在購(gòu)物車位置時(shí),購(gòu)物車數(shù)量圖標(biāo)加1,且實(shí)現(xiàn)彈簧動(dòng)畫.

第一階段代碼實(shí)現(xiàn)

第一階段編碼:繪制一個(gè)圓形的小球到商品的中間區(qū)域 這個(gè)非常簡(jiǎn)單,就是在商品圖片區(qū)域加一個(gè) div ,設(shè)置 position:fixed 及寬度高度等,但是呢?

先埋個(gè)問(wèn)題,如何讓小球出現(xiàn)在點(diǎn)擊當(dāng)前商品的范圍內(nèi)呢?

階段一踩坑

起初我通過(guò)計(jì)算屬性遍歷了商品列表,在所有的商品視圖中加入商品縮略圖小球,然后,通過(guò)給每個(gè)商品列表里增加一個(gè)boolean屬性 show ,通過(guò)點(diǎn)擊購(gòu)物車圖標(biāo)來(lái)控制我剛創(chuàng)建的小球的顯示與隱藏,然后自己就進(jìn)入了死胡同,饒了半天,計(jì)算屬性的數(shù)據(jù)通過(guò) set 方式改變后,Dom死活不聽(tīng)話就是不按套路出牌(因?yàn)橛?jì)算屬性存在數(shù)據(jù)緩存),于是不得已放棄此笨拙的辦法。

階段一最終實(shí)現(xiàn)方案

上面踩坑是因?yàn)樨澏?想一次性到位,提前加載所有商品的小球縮略圖,然后通過(guò)點(diǎn)擊購(gòu)物車來(lái)控制當(dāng)前商品縮略圖的顯示與隱藏.那么我們要不換一種思路,僅創(chuàng)建一個(gè)縮略小球怎么樣,通過(guò) boolean 來(lái)控制它的顯示和隱藏,位置動(dòng)態(tài)變化,點(diǎn)擊哪個(gè)商品就讓他顯示到哪個(gè)商品的范圍內(nèi),并且每次點(diǎn)擊給他設(shè)置個(gè)true的屬性丟到一個(gè)數(shù)組中.好,我們先在data中定義小球是否顯示的屬性及顯示小球的數(shù)組

data () {
 return {
  showMoveDot: [], //控制下落的小圓點(diǎn)顯示隱藏
 }

然后我們?cè)邳c(diǎn)擊購(gòu)物車的時(shí)候來(lái)給 showMoveDot 數(shù)組動(dòng)態(tài)增加屬性,然后在Dom中遍歷這個(gè)數(shù)組,雙向綁定,最后通過(guò) v-if 來(lái)控制顯示和隱藏,這樣是不是非常妙~~

點(diǎn)擊購(gòu)物車給 showMoveDot 增加 true 的屬性

methods: {
addToCart (product, num) {
 this.showMoveDot = [...this.showMoveDot, true];
 }
}

Dom中遍歷 showMoveDot ,并且通過(guò) v-if 來(lái)控制商品縮略小球的顯示

<div
 v-for="(item,index) in showMoveDot"
 :key="index">
 <div class="move_dot"
   ref="ball"
   v-if="item">
 </div>
</div>

此時(shí)點(diǎn)擊購(gòu)物車圖標(biāo)就會(huì)在當(dāng)前商品中出現(xiàn)商品縮略圖的小球,至此,階段一大功告成 ✿✿ヽ(°▽°)ノ✿ ~

第二階段代碼實(shí)現(xiàn)

本階段需要用到動(dòng)畫知識(shí),所以首先想到的是Vue的 transition 屬性,首先給縮略圖的小球包一層 transition 并且增加 appear 動(dòng)畫并且實(shí)現(xiàn) beforeEnter 、 afterEnter 事件方法,所以此時(shí)修改Dom代碼

<transition appear
    @before-appear="beforeEnter"
    @after-appear='afterEnter'
    v-for="(item,index) in showMoveDot"
    :key="index.id">
 <div class="move_dot"
   ref="ball"
   v-if="item">
 </div>
 </transition>

上面Dom代碼的兩個(gè)方法 beforeEnter 和 afterEnter 方法分別是動(dòng)畫初次渲染前和動(dòng)畫渲染后,那么我們就要把注意點(diǎn)放到這兩個(gè)狀態(tài)中. 在初次渲染的時(shí)候我們確定下小球的位置,那么這個(gè)時(shí)候我們就要用到一個(gè)方法 getBoundingClientRect ,這個(gè)方法返回的是一組矩形的集合,這下就好啦,可以通過(guò)這個(gè)方法來(lái)定位某個(gè)元素在屏幕中的位置啦:blush:~

那好,那我們這個(gè)時(shí)候就成熱打鐵,通過(guò)這個(gè)方法先來(lái)確定點(diǎn)擊購(gòu)物車圖標(biāo)的時(shí)候,購(gòu)物車這個(gè)小圖標(biāo)距左邊和頂部相對(duì)屏幕的距離。

定義兩個(gè) data 來(lái)接受點(diǎn)擊增加購(gòu)物車圖標(biāo)獲取到的值.

data () {
 return {
  showMoveDot: [], //控制下落的小圓點(diǎn)顯示隱藏
  elLeft: 0, //當(dāng)前點(diǎn)擊購(gòu)物車按鈕在網(wǎng)頁(yè)中的絕對(duì)top值
  elTop: 0, //當(dāng)前點(diǎn)擊購(gòu)物車按鈕在網(wǎng)頁(yè)中的絕對(duì)left值
 }

然后我們?cè)邳c(diǎn)擊添加購(gòu)物車的方法里獲取位置。

 methods: {
 addToCart () {
  this.showMoveDot = [...this.showMoveDot, true];
  this.elLeft = event.target.getBoundingClientRect().left;
  this.elTop = event.target.getBoundingClientRect().top;
 }
}

此時(shí)就獲取到了點(diǎn)擊加入購(gòu)物車圖標(biāo)的位置啦:v:這個(gè)時(shí)候離成功進(jìn)了一大半~ 獲取到增加購(gòu)物車圖標(biāo)的距離后,通過(guò)相對(duì)位置來(lái)確定商品縮略小球的位置,于是在動(dòng)畫渲染前我們?cè)O(shè)置下他的 transform 值,x,y的值自己可以調(diào)整,并且讓他的透明度為0,暫時(shí)不顯示.

beforeEnter (el) {
   // 設(shè)置transform值
   el.style.transform = `translate3d(${this.elLeft - 30}px,${this.elTop - 100}px , 0)`;
   // 設(shè)置透明度
   el.style.opacity = 0;
  },

接下來(lái)就是關(guān)鍵,如何讓小球從當(dāng)前位置移動(dòng)到底部 Tabbar 的購(gòu)物車中呢?同樣的方法,我們通過(guò) getBoundingClientRect 方法來(lái)確定底部Tabbar的購(gòu)物車徽標(biāo)的 left 和 top 值,獲取到這個(gè)值后,就讓小球在當(dāng)前位置,以貝塞爾曲線的方式向購(gòu)物車x和y的方向移動(dòng),當(dāng)移動(dòng)完成后將數(shù)組 showMoveDot 的屬性設(shè)置為 false 且透明度為1.

在小球繪制完成后的方法中

afterEnter (el) {
  // 獲取底部購(gòu)物車徽標(biāo)
  const badgePosition = document
  .getElementById("buycar")
  .getBoundingClientRect();
  // 設(shè)置小球移動(dòng)的位移
  el.style.transform = `translate3d(${badgePosition.left + 30}px,${badgePosition.top - 30}px,0)`
  // 增加貝塞爾曲線 
  el.style.transition = 'transform .88s cubic-bezier(0.3, -0.25, 0.7, -0.15)';
  el.style.transition = 'transform .88s linear';
  this.showMoveDot = this.showMoveDot.map(item => false);
  // 設(shè)置透明度
  el.style.opacity = 1;
 }

此時(shí)大功告成!點(diǎn)擊添加購(gòu)物車按鈕,小球可以曲線飛到購(gòu)物車中了,來(lái)個(gè)Gif圖炫耀下✿✿ヽ(°▽°)ノ✿

掘友請(qǐng)留步(╥╯^╰╥)你以為這樣就算完成了嘛~對(duì)于Geek:monkey_face:來(lái)說(shuō),這樣的效果,簡(jiǎn)直太Low啦,于是乎,咱們繼續(xù)一起來(lái)做個(gè)優(yōu)化吧~

階段三 體驗(yàn)優(yōu)化

優(yōu)化一:把小球變成點(diǎn)擊當(dāng)前商品的圖片

剛開始還真TM把我給難住了,這么多圖片,鬼知道顯示哪個(gè)呢?后來(lái)靈機(jī)一動(dòng),不就是個(gè)動(dòng)態(tài)加載圖片嘛,點(diǎn)擊加入購(gòu)物車的時(shí)候當(dāng)前的商品對(duì)象已經(jīng)拿到了,你怕啥,直接取就完啦!~so easy:smile:好,思路有了,那咱就上代碼!

1.在data中追加個(gè) dropImage 屬性.

data () {
 return {
  showMoveDot: [], //控制下落的小圓點(diǎn)顯示隱藏
  elLeft: 0, //當(dāng)前點(diǎn)擊購(gòu)物車按鈕在網(wǎng)頁(yè)中的絕對(duì)top值
  elTop: 0, //當(dāng)前點(diǎn)擊購(gòu)物車按鈕在網(wǎng)頁(yè)中的絕對(duì)left值
  dropImage: '' // 小球圖片
 }

2.在Dom中通過(guò)動(dòng)態(tài)綁定的方式來(lái)獲取 dropImage

<transition appear
     @after-appear='afterEnter'
     @before-appear="beforeEnter"
     v-for="(item,index) in showMoveDot"
     :key="index.id">
  <div class="move_dot"
    ref="ball"
    v-if="item">
   <!-- 小球圖片 -->
   <img :src="dropImage"
    alt="">
  </div>
  </transition>

3.動(dòng)態(tài)給 dropImage 賦值

addToCart (product) {
  // 取出商品的圖片
  this.dropImage = product.small_image;
  // 將商品添加到購(gòu)物車中
  this.ADD_TO_CART(product);
  // 購(gòu)物車左邊的
  this.elLeft = event.target.getBoundingClientRect().left;
  this.elTop = event.target.getBoundingClientRect().top;
  this.showMoveDot = [...this.showMoveDot, true];
 },

好啦!此時(shí)我們就完成了小球圖片的動(dòng)態(tài)加載,來(lái)個(gè)Gif圖炫一哈✿✿ヽ(°▽°)ノ✿

但是有木有發(fā)現(xiàn)個(gè)問(wèn)題,圖片飛過(guò)去很突兀,直來(lái)直去的,不夠友好,行那咱繼續(xù)優(yōu)化~~

優(yōu)化二:飛入購(gòu)物車的商品縮略圖逐漸變小

哈哈~讓商品飛入的時(shí)候逐漸變小,思來(lái)想去,還是用 css3 的 keyframes 來(lái)搞比較好,廢話不多說(shuō)直接上代碼.

1.設(shè)置 keyframes 的值

 @keyframes mymove {
 0% {
  transform: scale(1);
 }
 25% {
  transform: scale(0.8);
 }
 50% {
  transform: scale(0.6);
 }
 75% {
  transform: scale(0.4);
 }
 100% {
  transform: scale(0.2);
 }
 }

2.給商品縮略圖添加 animation 并加入 keyframes

img {
  animation: 0.88s mymove ease-in-out;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  }

好嘞,搞定!來(lái)個(gè)Gif圖炫一哈✿✿ヽ(°▽°)ノ✿

為啥我覺(jué)得還是有點(diǎn)突兀呢,沒(méi)辦法,處女座,必須讓他更完美:see_no_evil:

優(yōu)化三:購(gòu)物車加入商品后彈簧效果

商品縮略小球逐漸變小的落入到購(gòu)物車中,此時(shí),購(gòu)物車再來(lái)個(gè)彈簧效果就更美了,還是老辦法用 css3 的 keyframes 再合適不過(guò)啦~

由于Tabbar是用的 Vant UI組件,在單獨(dú)的 Dashboard.vue 文件中,所以在 Dashboard.vue 文件中給購(gòu)物車這個(gè)圖標(biāo)設(shè)置 keyframes 值.

@keyframes carmove {
 0% {
 transform: scale(1);
 }
 25% {
 transform: scale(0.8);
 }
 50% {
 transform: scale(1.1);
 }
 75% {
 transform: scale(0.9);
 }
 100% {
 transform: scale(1);
 }
}

并且把這個(gè) keyframes 值設(shè)置給購(gòu)物車這個(gè)圖標(biāo)

.moveToCart {
 animation: mymove 0.5s ease-in-out;
}

購(gòu)物車的動(dòng)畫是加完了,但是如何控制小球移入到購(gòu)物車后讓動(dòng)畫生效呢?于是先找到小球動(dòng)畫結(jié)束的方法,通過(guò)查資料找到了 transitionend 和 webkitAnimationEnd 兩個(gè)方法,于是我對(duì)他們做了監(jiān)聽(tīng),當(dāng)小球消失的時(shí)候在這兩個(gè)方法中動(dòng)態(tài)的增加Tabbar底部購(gòu)物車的 keyframes 值.

afterEnter (el) {
  // 監(jiān)聽(tīng)小球動(dòng)畫結(jié)束方法
  el.addEventListener('transitionend', () => {
  el.style.display = 'none';
  this.listenInCart();
  })
  // 監(jiān)聽(tīng)小球動(dòng)畫結(jié)束方法
  el.addEventListener('webkitAnimationEnd', () => {
  el.style.display = 'none';
  this.listenInCart();
  })
 },

this.listenInCart() 方法是控制底部Tabbar購(gòu)物車圖標(biāo)動(dòng)畫的方法,我們已經(jīng)定義了一個(gè)class moveToCart ,我采用取巧的辦法,當(dāng)動(dòng)畫結(jié)束的時(shí)候,給Tabbar的購(gòu)物車添加class moveToCart ,然后讓他在500ms后在移除這個(gè)class,這樣就會(huì)保證每次增加購(gòu)物車后,底部Tabbar都會(huì)執(zhí)行 keyframs 動(dòng)畫.

listenInCart () {
  // 拿到底部Tabbar購(gòu)物車的DOM元素添加class
  document.getElementById("buycar").classList.add('moveToCart');
  setTimeout(() => {
  // 500毫秒后移除底部Tabbar購(gòu)物車的DOM元素class
  document.getElementById("buycar").classList.remove('moveToCart');
  }, 500);
 }

此時(shí)算是真正的大功告成:cherry_blossom:,來(lái)個(gè)Gif圖炫耀一哈✿✿ヽ(°▽°)ノ✿

都看到這里啦,還不點(diǎn)贊支持下:smile:,鼓勵(lì)下作者~ 三、重點(diǎn)來(lái)了:rocket::rocket:

我知道掘友們已經(jīng)迫不及待的想看源碼啦~當(dāng)然本篇知識(shí)點(diǎn)只是整個(gè)項(xiàng)目的冰山一角,還有很多好用好玩的新技術(shù),如 Better-scroll 滾動(dòng)使用,高德地圖的集成,圖片瀑布流,移動(dòng)端適配等等主流技術(shù)在這個(gè)項(xiàng)目中幾乎都有~放個(gè)GitHub連接,掘友們可不要吝嗇手中的小星星哦✿✿ヽ(°▽°)ノ✿

:tada:Vue構(gòu)建大型單頁(yè)面電商應(yīng)用 開源啦!點(diǎn)我看源碼:rocket::rocket:

總結(jié)

以上所述是小編給大家介紹的Vue實(shí)現(xiàn)商品飛入購(gòu)物車效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！