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