app網(wǎng)站開發(fā)書籍下載企業(yè)網(wǎng)絡(luò)營銷策略分析案例
代碼打包資源下載:【免費(fèi)】HTML+JS+CSS移動端購物車選購界面資源-CSDN文庫
關(guān)鍵部分說明:
UIGoods
類:
- 構(gòu)造函數(shù): 創(chuàng)建
UIGoods
實(shí)例時(shí),傳入商品數(shù)據(jù)g
,初始化商品的數(shù)據(jù)和選擇數(shù)量。 getTotalPrice()
方法: 計(jì)算商品的總價(jià),考慮了選擇數(shù)量。isChoose()
方法: 判斷是否選中該商品。increase()
方法: 增加商品的選擇數(shù)量。decrease()
方法: 減少商品的選擇數(shù)量,但數(shù)量不會小于 0。
class UIGoods {constructor(g) {this.data = gthis.choose = 0}getTotalPrice() {return this.data.price * this.choose}isChoose() {return this.choose > 0}increase() {this.choose++}decrease() {if (this.choose === 0) {return}this.choose--}
}
UIData
類:
- 構(gòu)造函數(shù): 初始化頁面數(shù)據(jù),包括商品列表、起送價(jià)格和配送費(fèi)。
getTotalPrice()
方法: 計(jì)算購物車中所有商品的總價(jià)。increase(index)
和decrease(index)
方法: 分別用于增加和減少某個(gè)商品的選擇數(shù)量。getTotalChooseNum()
方法: 獲取購物車中所有商品的總選擇數(shù)量。isGoodsInCar()
方法: 判斷購物車中是否有商品。isStartSendPrice()
方法: 判斷是否達(dá)到起送價(jià)格。isChoose(index)
方法: 判斷某個(gè)商品是否被選中。
class UIData {constructor() {let uiGoods = []goods.forEach(item => {let uig = new UIGoods(item)uiGoods.push(uig)})this.uiGoods = uiGoodsthis.startSendPrice = 30this.needSendPrice = 5}getTotalPrice() {let sum = 0this.uiGoods.forEach((item, index) => {sum += item.getTotalPrice()})return sum}increase(index) {this.uiGoods[index].increase()}decrease(index) {this.uiGoods[index].decrease()}getTotalChooseNum() {let sum = 0this.uiGoods.forEach((item) => {sum += item.choose})return sum}isGoodsInCar() {return this.getTotalChooseNum() > 0}isStartSendPrice() {return this.getTotalPrice() > this.startSendPrice}isChoose(index) {return this.uiGoods[index].isChoose()}
}
UI
類:
- 構(gòu)造函數(shù): 初始化頁面和事件監(jiān)聽。
creatHTML()
方法: 根據(jù)商品數(shù)據(jù)創(chuàng)建商品元素的 HTML 結(jié)構(gòu),用于初始化頁面。increase(index)
和decrease(index)
方法: 用于增加和減少商品選擇數(shù)量,同時(shí)更新頁面顯示。updateGoodsItem(index)
和updateFooter()
方法: 更新商品元素和頁腳的顯示狀態(tài)。carAnimate()
和jump(index)
方法: 分別處理購物車動畫和商品選擇數(shù)量變化的跳躍拋物線動畫。
class UI {constructor() {// ...(省略其他初始化和元素獲取的代碼)let carRect = this.doms.car.getBoundingClientRect()let jumpTarget = {x: carRect.left + carRect.width / 2,y: carRect.top + carRect.height / 5}this.jumpTarget = jumpTargetthis.creatHTML()this.updateFooter()this.listenEvent()}// ...(省略其他方法)creatHTML() {let html = ''this.uiData.uiGoods.forEach((item, index) => {html += `<div class="goods-item"><!-- ...省略商品元素的HTML結(jié)構(gòu)... --></div>`})this.doms.goodsContainer.innerHTML = html}increase(index) {this.uiData.increase(index)this.updateGoodsItem(index)this.updateFooter()this.jump(index)}decrease(index) {this.uiData.decrease(index)this.updateGoodsItem(index)this.updateFooter()}// ...(省略其他方法)updateGoodsItem(index) {// 更新商品元素的顯示狀態(tài)// ...省略具體實(shí)現(xiàn)...}updateFooter() {// 更新頁腳的顯示狀態(tài)// ...省略具體實(shí)現(xiàn)...}carAnimate() {this.doms.car.classList.add('animate')}jump(index) {// 商品選擇數(shù)量變化的跳躍拋物線動畫// ...省略具體實(shí)現(xiàn)...}
}
注意:
文章說明:該功能是根據(jù)“渡一前端”視頻敲出來的,并不屬于原創(chuàng),但是轉(zhuǎn)載或是翻譯的連接我找不到了,所以使用的原創(chuàng)標(biāo)簽,特此說明一下。