点餐小程序实战教程05-点餐功能开发

news2024/11/19 6:17:29

目录

  • 1 点餐需求分析
  • 2 变量定义
  • 3 点餐分类功能实现
  • 4 菜品展示功能开发
  • 5 实现切换分类时过滤数据
  • 总结

我们上一篇设计了点餐分类及点餐信息数据源的功能,本篇我们介绍一下如何开发点餐功能。

1 点餐需求分析

在这里插入图片描述
看一下页面是分为两部分,左侧是侧边栏导航,用来展示点餐的分类信息。右侧列出了菜品信息,如果未点餐的时候是一个加号的图标,如果点击加号就可以增加数量。在点击图标的同时将菜品信息加入到购物车里。

如果点击减号将数量减到0的时候同时将菜品移除购物车。

2 变量定义

因为我们需要将菜品信息添加到购物车,点一个菜就加入一个菜品。像这类型的需求,在微搭里我们可以用数组类型进行存储。

数组相当于一个容器,可以将元素添加到容器里。如果我们需要获取某个元素的信息可以通过下标来获取。

微搭中的变量是遵循javascript的语法,包括定义、赋值、取值都可以参考JavaScript数组的语法。

打开应用编辑器,点击顶部导航条的变量

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/541601.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

论文解读 | 《基于采样的MPC控制的约束视觉》

原创 | 文BFT机器人 引言 Introduction 视觉伺服控制方案,如基于图像的(IBVS),基于姿态的(PBVS)或基于混合的(HBVS),在过去的几十年里得到了广泛的发展。众所周知,要处理的主要问题涉及局部极小点或奇异点的存在、可见性约束、联合…

缺少ssl模块

nginx采用源码安装方式 1、 查看是否有模块,如下没有 /usr/local/nginx/sbin/nginx -V1.1、 备份nginx配置文件 cp -a nginx.conf nginx.conf.bak2、 进nginx安装包目录 ./configure --prefix/usr/local/nginx --with-http_stub_status_module --with-http_ssl_mo…

将 NGINX 部署为 API 网关

现代应用架构的核心是 HTTP API。HTTP 支持快速构建和轻松维护应用。HTTP API 提供了一个通用接口,因此不必考虑应用的规模大小,无论是单独用途的微服务还是大型综合应用。 HTTP 不仅可以支持超大规模互联网,也可用于提供可靠和高性能的 API …

解决一个诡异的java空指针问题的案例

最近在看java类加载器的资料,于是写了一个自定义类加载器测试一下,结果就悲剧了,直接报空指针! 跟着报错指引看代码37行是什么东东? 就是一个inputStream, 然后看看它的定义: 这玩意就是从classpath读取cla…

html实现一个一闪一闪的按钮,CSS实现一个一闪一闪的按钮,Css闪烁点标,css设置按钮层次感,css按钮美化,CSS按钮动画过渡,CSS按钮添加阴影

效果 动态 静态 实现 底部多加了几个过渡按钮 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><style>#app {margin: 2% auto;text-align: center;}.lay-btn-box {position: relative;display: …

【达梦数据库】达梦数据库windows安装

目录 1.选择语言与时区 2.安装向导 3.许可证协议 4.验证 Key 文件 5.选择安装组件 6.选择安装目录 7.目录确认 8.开始安装 9.安装过程 10.安装完成 11.创建数据库实例 12.创建数据库模板 13.数据库目录 14.数据库标识 15.数据库文件 16.初始化参数 17.口令管理…

VoxelNeXt:用于3D检测和跟踪的纯稀疏体素网络

VoxelNeXt:Fully Sparse VoxelNet for 3D Object Detection and Tracking 目前自动驾驶场景的3D检测框架大多依赖于dense head&#xff0c;而3D点云数据本身是稀疏的&#xff0c;这无疑是一种低效和浪费计算量的做法。我们提出了一种纯稀疏的3D 检测框架 VoxelNeXt。该方法可以…

电脑断电后无法正常启动怎么办?

电脑断电后无法正常启动是一个很常见的问题&#xff0c;其实除断电外&#xff0c;电脑强制关机后无法正常启动也很常见&#xff0c;出现这个问题一般是由硬件导致&#xff0c;可能是内存、电源、主板、显卡、硬盘等硬件出现问题&#xff0c;尤其是一瞬间断电再来电&#xff0c;…

全网最牛最全面的接口自动化接口关联的三个层次

一、&#xff08;接口查询的条件分析&#xff09; 1.一般来说&#xff0c;在所有平台中&#xff0c;凡是往数据库里增加接口&#xff0c;必然有相应的查询接口和修改操作的接口 2.接口的后台服务除了要把数据返回给我们之外&#xff0c;还要把真正对数据的修改操作写入数据库…

linux系统学习

本文建立于Linux的课堂学习 文章目录 Linux基础1. Linux操作环境1.1 简述Linux文件类型有哪些1.2 简述Linux的文件访问权限1.3 简述shell的功能&#xff0c;常见的shell有几种1.4 列举几个常用的Shell环境变量以及用途 2. Linux Shell命令操作2.1 简述在Linux Shell中获取帮助…

数据结构总结6:八大排序

后续会有补充 排序 排序&#xff1a;按照某个或某些关键字的大小&#xff0c;递增或递减排列起来的操作。 稳定性&#xff1a;假定在待排序的记录序列中&#xff0c;存在多个具有相同的关键字的记录&#xff0c;若经过排序&#xff0c;这些记录的相对次序保持不变&#xff0c…

如何完美卸载VS2015(2023年5月份实测有效)

使用控制面板卸载VS2015&#xff0c;出现正在配置您的系统&#xff0c;这可能需要一些时间&#xff0c;然后就出现卡住半个小时第二行的条都没有动的问题&#xff0c;这里提供vs2015以及以前版本的卸载方式 问题产生原因:他需要下载一些东西&#xff0c;然后由于你懂的网络原因…

基于yolov3训练自己的数据集

训练数据集的教学视频链接 42. 第六章&#xff1a;基于YOLO-V3训练自己的数据集与任务_哔哩哔哩_bilibili 数据打标签 下载labelme标注工具 通过pip install labelme下载&#xff0c;打开anaconda prompt&#xff0c;切换到下载labelme的环境&#xff08;我的是pytorch&…

torch显存分析——如何在不关闭进程的情况下释放显存

torch显存分析——如何在不关闭进程的情况下释放显存 1. 基本概念——allocator和block2. torch.cuda的三大常用方法3. 可以释放的显存4. 无法释放的显存&#xff1f;5. 清理“显存钉子户” 一直以来&#xff0c;对于torch的显存管理&#xff0c;我都没有特别注意&#xff0c;只…

ffmpeg mkv 文件解析

一、mkv的文件组织 1. EBML基本单元 EBML组成mkv文件最基本的单元&#xff0c; 也是解析文件最小的一个粒度。EBML基本元素结构&#xff1a; ID&#xff1a;标志着这个EMBL 是一个什么类型的&#xff0c;类型决定了后面data中存储的是什么类型的数据如是int&#xff0c;string…

腾讯云备案限制条件说明(必看)

腾讯云网站备案要求首先你有一个需要备案的域名&#xff0c;域名实名认证信息和备案主体相同&#xff1b;在腾讯云有一台符合备案条件的云服务器、轻量应用服务器等云产品&#xff1b;然后根据备案主体所在省份地区&#xff0c;符合当地的通信管理局要求。下面腾讯云百科来详细…

Centos7系统常用命令

一、防火墙firewalld、sestatus 1 查看防火墙状态&#xff1a;systemctl status firewalld 2 关闭运行的防火墙&#xff1a;systemctl stop firewalld.service 开启运行的防火墙&#xff1a;systemctl start firewalld.service 3 禁止防火墙服务器&#xff1a;systemctl di…

如何一行代码实现 OpenAI 可观测,大幅提升使用体验

作者&#xff5c;观测云 徐季秋 现在基于 OpenAI 的 Chat 应用井喷&#xff0c;但给开发者带来了两个难点&#xff0c;一是因为 OpenAI 基于 tokens 的计费机制导致不容易规划消费&#xff1b;另一是 OpenAI 提供的调用本身不稳定&#xff0c;很难分辨是传参错误或是访问失败。…

flume 进阶 Ganglia 部署(十二)

规划安装 hadoop100: web gmetad gmod epel-release hadoop101: gmod epel-release hadoop102: gmod epel-release 安装 三台都安装 sudo yum -y install epel-releasesudo yum -y install ganglia-gmond在hadoop100安装 sudo yum -y install ganglia-gmetadsudo yum -y i…

RT-Thread 2. GD32在 RT-Thread Nano上添加控制台与 FinSH

本篇文档分为两部分&#xff1a; 第一部分是添加 UART 控制台&#xff08;实现打印&#xff09;&#xff1a;用来向控制台对接的终端输出打印信息&#xff1b;该部分只需要实现两个函数&#xff0c;串口初始化和系统输出函数&#xff0c;即可完成 UART 控制台打印功能。 第二部…