前端学习笔记-8.12.学习饿了么购物车列表页

购物车列表页"/>

前端学习笔记-8.12.学习饿了么购物车列表页

购物车列表页，分两部分，上部分title，下部分购物列表。title分为左 购物车，右清空控件。购物列表分为多条，左名称，右边价格、加减号数量组件（可复用）。
购物车列表页默认隐藏，有商品被撑开，有最大高度，超过最大高度，可滚动。v-show控制列表页的展示隐藏。
1.在shopcart.vue中添加shopcart-list的结构

先添加fold，默认折叠

默认折叠

在content上绑定列表页，设置点击事件toggleList

toggleList方法

css样式


列表页生成了，我们是在better-scroll中设置的点击事件，所以需要better-scroll跟购物车相关联，当超过适口可滚动，引入better-scroll。写下方法

弄一下加减号组件，引入cartcontrol。
清空购物车方法，记得给添加点击事件

接下来实现模糊的背景页，它置于整个页面之上，列表页之下，注意z-index的值

点击方法

最后pay提交

点击结算，结算过后因为冒泡事件的原因（pay是列表详情页的子节点），列表详情页会被展开，用stop.prevent阻止冒泡事件的发生

list-mask的css