vuejs仿美团,饿了么项目之——商品数量加减篇

JavaScript010

vuejs仿美团,饿了么项目之——商品数量加减篇,第1张

首先,新增个商品数量的加减功能组件,就叫cartcontrol.vue吧。新增个底部购物车组件,叫shopcart.vue吧。在good.vue中引入并注册组件。

cartcontrol.vue中,通过props来接收list对象

因为我在json中没有设置数量这个key,所以需要全局用vue.set进行注册这个属性。在add方法中,如果没有这个属性,那么就注册,如果有,那么就count++

这里增加了一点小效果。应用了<transition>。 并且当数量减到0的时候。通过v-show来控制减号和数值是否显示。

写的比较粗糙,估计只有我自己能懂。这里要注意一下,在BScroll实例中要配置下click:true。使better-scroll滚动部分支持点击事件。否则加减号的点击事件无效。好吧~下篇写下底部的购物车功能。

美团外卖买药使用购物车在店铺使用。

1、打开美团外卖,点击首页上方的买药应用。

2、在搜索框输入药品名称,点击搜索。

3、选择一个药店,点击药品右侧的加入购物车即可。