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

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