上篇把購物車的一些功能實(shí)現(xiàn)了驱入，這篇寫一下有關(guān)購物車列表的主要功能赤炒。
通過上篇我們知道。遍歷JSON數(shù)據(jù)如果有count值亏较，說明執(zhí)行了添加事件莺褒，那么將這些商品數(shù)據(jù)傳入一個(gè)數(shù)組foodlist,并通過props傳給購物車組件。那么購物車列表的內(nèi)容就是v-for傳入的這個(gè)foodlist即可雪情。
購物車列表的大概樣式就是隱藏的遵岩。當(dāng)有商品添加，點(diǎn)擊底部購物車圖標(biāo)就顯示巡通，再點(diǎn)擊或者點(diǎn)擊遮罩就隱藏尘执。如果沒有商品，就不會(huì)出現(xiàn)宴凉，這些都是通過v-show控制誊锭。
<!-- 購物車列表 -->
<div class="shop-list" v-show="listShow">
<p class="shop-list-title" @click="clearCart">清空購物車</p>
<div class="shop-list-wrapper" ref="shopListScroll">
<ul>
<li class="shop-list-content" v-for="item in foodlist" >
<div class="shop-list-left">{{item.name}}</div>
<div class="shop-list-middle">{{item.price}}</div>
<div class="shop-list-right">
<cartcontrol :listItem="item"></cartcontrol>
</div>
</li>
</ul>
</div>
</div>
shop-list-wrapper給個(gè)max-height的值，超過就隱藏弥锄。給個(gè)ref炉旷，引入better-scroll。設(shè)置滾動(dòng)叉讥。記得要加click:true窘行。
購物車列表的清空購物車容易，直接遍歷foodlist,將所有的商品的count清零就OK了图仓。
clearCart(){
this.foodlist.forEach(val => {
val.count = 0
})
this.isShow = false
}
data中設(shè)置個(gè)控制隱藏顯示的變量isShow,通過v-show綁定在購物車列表的DOM上罐盔。點(diǎn)擊購物車切換隱藏顯示就很容易了。如果購物車沒有totalCount救崔，說明沒有商品被添加惶看，那么購物車看列表是隱藏的捏顺。如果有那么切換就是this.isShow = !this.isShow
toggle(){
if(!this.totalCount){
this.isShow = false
}
this.isShow = !this.isShow
},
但是光靠一個(gè)isShow顯然不能完全實(shí)現(xiàn)這個(gè)功能蛙卤， 這里我添加了一個(gè)方法listShow. 來實(shí)現(xiàn)點(diǎn)擊遮罩層贞铣，隱藏購物車列表。
listShow(){
if(!this.totalCount){
this.isShow = false;
return false
}
this.$nextTick(() => {
if(!this.shopScroll){
this.shopScroll = new BScroll(this.$refs.shopListScroll, {
click: true
})
}
else{
this.shopScroll.refresh()
}
})
return this.isShow
}
遮罩層v-show="listShow" @click="toggle()"
這一塊的功能有點(diǎn)繞人扳碍，但是不難理解本今。實(shí)現(xiàn)的功能如下：暫時(shí)沒找到什么BUG拆座。
這個(gè)小demo的主要功能也就是這些。多寫多思考冠息，熟能生巧吧~
總結(jié)一下用到的知識(shí)點(diǎn)挪凑，vue2.x vue-router axios fetch better-scroll flex布局，組件化逛艰。
如果有什么錯(cuò)誤躏碳，請(qǐng)多多指出。謝謝~
