目录
- 1 点餐需求分析
- 2 变量定义
- 3 点餐分类功能实现
- 4 菜品展示功能开发
- 5 实现切换分类时过滤数据
- 总结
我们上一篇设计了点餐分类及点餐信息数据源的功能,本篇我们介绍一下如何开发点餐功能。
1 点餐需求分析
看一下页面是分为两部分,左侧是侧边栏导航,用来展示点餐的分类信息。右侧列出了菜品信息,如果未点餐的时候是一个加号的图标,如果点击加号就可以增加数量。在点击图标的同时将菜品信息加入到购物车里。
如果点击减号将数量减到0的时候同时将菜品移除购物车。
2 变量定义
因为我们需要将菜品信息添加到购物车,点一个菜就加入一个菜品。像这类型的需求,在微搭里我们可以用数组类型进行存储。
数组相当于一个容器,可以将元素添加到容器里。如果我们需要获取某个元素的信息可以通过下标来获取。
微搭中的变量是遵循javascript的语法,包括定义、赋值、取值都可以参考JavaScript数组的语法。
打开应用编辑器,点击顶部导航条的变量