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

我們提供的服務(wù)有：網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、鋼城ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的鋼城網(wǎng)站制作公司

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

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

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

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

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

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

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

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

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

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

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

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

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

階段一踩坑

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

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

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

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

新聞名稱：Vue實(shí)現(xiàn)商品飛入購物車效果(電商項(xiàng)目)-創(chuàng)新互聯(lián)
文章路徑：http://weahome.cn/article/discss.html