vuejs仿美团，饿了么项目之——购物车列表篇

上篇把购物车的一些功能实现了，这篇写一下有关购物车列表的主要功能。
通过上篇我们知道。遍历JSON数据如果有count值，说明执行了添加事件，那么将这些商品数据传入一个数组foodlist,并通过props传给购物车组件。那么购物车列表的内容就是v-for传入的这个foodlist即可。
购物车列表的大概样式就是隐藏的。当有商品添加，点击底部购物车图标就显示，再点击或者点击遮罩就隐藏。如果没有商品，就不会出现，这些都是通过v-show控制。

        

            
清空购物车
            

                

                    

                        
{{item.name}}
                        
{{item.price}}
                        

                                
                        
                    
                
            
  
        

shop-list-wrapper给个max-height的值，超过就隐藏。给个ref，引入better-scroll。设置滚动。记得要加click:true。
购物车列表的清空购物车容易，直接遍历foodlist,将所有的商品的count清零就OK了。

    clearCart(){
                this.foodlist.forEach(val => {
                    val.count = 0
                })
                this.isShow = false
            }

data中设置个控制隐藏显示的变量isShow,通过v-show绑定在购物车列表的DOM上。点击购物车切换隐藏显示就很容易了。如果购物车没有totalCount，说明没有商品被添加，那么购物车看列表是隐藏的。如果有那么切换就是this.isShow = !this.isShow

toggle(){
                if(!this.totalCount){
                    this.isShow = false
                }
                this.isShow = !this.isShow
            },

但是光靠一个isShow显然不能完全实现这个功能， 这里我添加了一个方法listShow. 来实现点击遮罩层，隐藏购物车列表。

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()"
这一块的功能有点绕人，但是不难理解。实现的功能如下：暂时没找到什么BUG。

Animation.gif

这个小demo的主要功能也就是这些。多写多思考，熟能生巧吧~
总结一下用到的知识点，vue2.x vue-router axios fetch better-scroll flex布局，组件化。
如果有什么错误，请多多指出。谢谢~