1.先上圖（購物車布局+功能總圖）

購物車功能布局圖

2.下面就來分析需求了

????①左滑功能

????②單選功能

????③全選功能

????④件數(shù)的增加

????⑤件數(shù)的減少

????⑥批量刪除

????⑦計(jì)算所選商品的總價(jià)

3.話不多說，上主菜---------擼代碼

? ??①左滑功能的實(shí)現(xiàn)

? ? 思路：每一個(gè)購物車的商品是一個(gè)被封裝的組件。

? ? 購物車代碼（components構(gòu)造器自定義組件wxml+wxjs）

購物車wxml代碼1

購物車代碼結(jié)構(gòu)2

左滑的功能實(shí)現(xiàn)代碼

單選、刪除。件數(shù)加減，出現(xiàn)刪除二次確認(rèn)事件

解析：單選（selectItem），在wxml的單選節(jié)點(diǎn)上我綁定了自定義屬性data-，在子組件使用e.currentTarget.dataset獲取，

并且把這些獲取的值傳遞給父，讓他進(jìn)行監(jiān)聽（this.triggerEvent）,第一參數(shù)是監(jiān)聽的事件名稱，type是類型，index，id，shopnum是傳遞給父的參數(shù)。

父的wxml結(jié)構(gòu)

單選功能

單選功能

全選功能

全選功能

件數(shù)的增加和減少

件數(shù)的增減

總價(jià)的計(jì)算

總價(jià)計(jì)算函數(shù)

刪除

左滑的函數(shù)

二次確認(rèn)刪除的彈窗

彈窗的隱藏

批量刪除

批量刪除事件

二級確認(rèn)刪除彈窗的子組件

二級確認(rèn)刪除彈窗的子組件wxml

二級確認(rèn)刪除彈窗的子組件wxjs

總結(jié)

? ? 購物車功能上還可以完善，等我接了后臺有時(shí)間會(huì)更新，現(xiàn)有的已經(jīng)可以給你一個(gè)思路了吧。在這篇里，不僅僅是對購物車功能的實(shí)現(xiàn)，還有component自定義組件方法的熟悉。