餓了麼專案---11、新增商品到購物車的聯動功能（1）

阿新 • • 發佈：2019-01-29

export default { name:'cartshop', props: { //選中商品 selectFoods:{ type:Array }, //起送價 minPrice:{ type:Number }, //配送費 deliveryPrice:{ type:Number

} }, data(){ return{ balls:[{ show:false },{ show:false },{ show:false },{ show:false },{ show:false }], dropBalls:[] } }, computed:{ AllPrice:function

(){ let ap = 0; this.selectFoods.forEach((item)=>{ ap +=item.price*item.count; }) return ap }, foodCount:function(){ let count = 0; this.selectFoods.forEach((item)=>{ count +=item.count; }) return

count; }, DescPric:function(){ if(this.AllPrice==0){ return '￥'+this.minPrice+'起送'; }else if(this.AllPrice<this.minPrice){ let price =this.minPrice -this.AllPrice; return '還差￥'+price+'起送'; }else if(this.AllPrice>this.minPrice){ return '結算'; } } }, 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; } } }, beforeEnter(el){ let count = this.balls.length; while (count--) { let ball = this.balls[count]; if (ball.show===true) { //cartcontrol元件的加號DOM物件相對視窗的距離 let rect = ball.el.getBoundingClientRect(); let x =rect.left - 32; let y = -(window.innerHeight - rect.top - 23); el.style.display = ''; //小球縱軸做動畫 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)`; } } }, enter(el){ //觸發瀏覽器重繪 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)'; }); }, afterEnter(el){ let ball = this.dropBalls.shift(); if (ball) { el.style.display = 'none'; ball.show = false; } } } }

餓了麼專案---11、新增商品到購物車的聯動功能（1）

餓了麼專案---11、新增商品到購物車的聯動功能（1）

餓了麼專案---12、父子元件、兄弟元件之間資料通訊與事件派發（關於購物車新增按鈕的動畫）

餓了麼專案---13、模組化程式設計，實現商品詳情頁面

餓了麼專案---6、使用Props傳遞資料

餓了麼專案---4、移動端檢視專案及border 1畫素問題

餓了麼專案---7、ref屬性註冊節點資訊，並獲取DOM節點（1）

餓了麼專案---10、（1）css3過渡、變換及3d變換、動畫

Vue2.x實戰餓了麼專案筆記（一）

vue餓了麼專案實現評論列表的篩選

VUE餓了麼樹形控制元件新增增刪改功能

餓了麼專案（三）

Vue高仿餓了麼專案（2）—mock資料

Vue2.0實現高仿餓了麼專案裡的小球飛入動畫

餓了麼專案開始---css3的flex佈局，開發移動端介面

餓了麼首頁實現左右兩欄聯動。

java網路程式設計：11、基於UDP的socket程式設計（一）理論、基本步驟

基於公有雲平臺實現直播、點播及小視頻功能（二）

js仿百度地圖拖拽、縮放、添加圖層功能（原創）

已知長度為n的線性表A採用順序儲存結構，請寫一個時間複雜度為O（n）、空間複雜度為O（1）的演算法，該演算法可刪除線性表中所有值為item的資料元素。

已知順序表L中的元素為int，請寫一時間複雜度O（n）、空間複雜度為O（1）的程式，將L中的奇數元素排在前面，偶數元素排在後面

餓了麼專案---11、新增商品到購物車的聯動功能（1）

相關推薦