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

JavaScript011

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滚动部分支持点击事件。否则加减号的点击事件无效。好吧~下篇写下底部的购物车功能。

链接:https://github.com/ljianshu/mt-app

适合没有经验的朋友。

集点菜、用户评价和商家信息为一体的移动端点餐APP

1. 点餐页面

点选商品后自动添加到购物车,并计算好总价,在商品列表、购物车列表和商品详情页都可以随意增减数目,此外左侧商品分类和右侧的商品相互关联,通过better-scroll插件滑动商品列表时,相应的商品分类也会跟着跳转。

2. 用户评价页面

主要包括一个TAB栏,包括三部分:全部、有图和评价三个模块

3. 商家信息页面

主要介绍一些商家基本信息,可以通过better-scroll插件,进行左右滑动图片。

效果预览

再说一篇,是饿了么的翻版。

前端框架百花齐放、争奇斗艳,令人眼花缭乱。大神们一言不合就整一个框架出来,另小白们无所适从。下面罗列了一些比较优秀的UI框架,Star多的大都是老牌劲旅,Star少的许多是后起之秀。

(1)Element 饿了么 vue 2.0后台UI框架 (Star:18382)

https://github.com/ElemeFE/element

(2)iview组件库 (Star:10186)

iView 主要服务于 PC 界面的中后台业务,很优秀的组件库,可惜不适合移动端

https://github.com/iview/iview

https://iviewui.com/

(3)vux 基于Vue和WeUI的移动UI组件 (Star:9762)

Vux是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。

https://github.com/airyland/vux

https://vux.li/

(4)Mint-UI 饿了么移动端组件库 (Star:8062)

由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库

https://github.com/ElemeFE/mint-ui

(5)vue-admin 管理面板UI框架 (Star:6289)

https://github.com/vue-bulma/vue-admin

(6)vue-material为 Vue.js 打造的 Material 风格的组件 (Star:4550)

https://github.com/vuematerial/vue-material

https://vuematerial.github.io/#/

(7)vue-strap基于 Vue.js 的 Bootstrap 组件 (Star:4400)

https://github.com/yuche/vue-strap

http://yuche.github.io/vue-strap/

(8)KeenUI 基于Material Design的UI (Star:3041)

https://josephuspaye.github.io/Keen-UI/

(9)vonic (Star:2276)

https://github.com/wangdahoo/vonic/

https://wangdahoo.github.io/vonic/docs/#/

(10)Radon-ui awe大神最近写的一套UI (Star:791)

https://github.com/luojilab/radon-ui

(11)N3-components 基于N3ui (Star:781)

https://github.com/N3-components/N3-components

(12)vue-carbon (Star:739)

https://github.com/myronliu347/vue-carbon

上文转自于 https://www.cnblogs.com/tkzc2013/p/8127294.html

更多 vue 框架参考 https://www.awesomes.cn/subject/vue# 应用-框架

优秀的 github demo 推荐 https://github.com/bailicangdu