外卖点餐列表滑动 微信小程序_点餐小程序购物车效果实现,点餐小程序购物车列表的实现...
自己的第一个点餐小程序,主要包括左右菜单联动、点击数量加减、菜单和购物车数量可以同步加减、购物车动画等,纯前端实现
大致的功能样式如下图展示:
代码块
主要代码块:
// 点击左侧分类切换右侧菜品
changeRightMenu: function (e) {
var classify = e.target.dataset.id;// 获取点击项的id
var foodList = this.data.foodList;
var allFoodList = this.data.allFoodList;
var newFoodList = [];
if (classify == 0) {//选择了全部选项
this.setData({
curNav: classify,
foodList: allFoodList
})
} else { //选择了其他选项
for (var i in allFoodList) {
if (allFoodList[i].catid == classify) {
newFoodList.push(allFoodList[i])
}
}
this.setData({
// 右侧菜单当前显示第curNav项
curNav: classify,
foodList: newFoodList
})
}
},
// 购物车及菜单中增加数量
addCount: function (e) {
var id = e.currentTarget.dataset.id;[这里写链接内容](http://download.csdn.net/download/m0_37543652/10019843%20%20%E6%BA%90%E7%A0%81%E4%B8%8B%E8%BD%BD%E5%9C%B0%E5%9D%80)
var arr = wx.getStorageSync('cart') || [];
var f = false;
for (var i in this.data.foodList) {// 遍历菜单找到被点击的菜品,数量加1
if (this.data.foodList[i].id == id) {
this.data.foodList[i].quantity += 1;
if (arr.length > 0) {
for (var j in arr) {// 遍历购物车找到被点击的菜品,数量加1
if (arr[j].id == id) {
arr[j].quantity += 1;
f = true;
try {
wx.setStorageSync('cart', arr)
} catch (e) {
console.log(e)
}
break;
}
}
if (!f) {
arr.push(this.data.foodList[i]);
}
} else {
arr.push(this.data.foodList[i]);
}
try {
wx.setStorageSync('cart', arr)
} catch (e) {
console.log(e)
}
break;
}
}
this.setData({
cartList: arr,
foodList: this.data.foodList
})
this.getTotalPrice();
},
// 定义根据id删除数组的方法
removeByValue: function (array, val) {
for (var i = 0; i < array.length; i++) {
if (array[i].id == val) {
array.splice(i, 1);
break;
}
}
},
// 购物车减少数量
minusCount: function (e) {
var id = e.currentTarget.dataset.id;
var arr = wx.getStorageSync('cart') || [];
for (var i in this.data.foodList) {
if (this.data.foodList[i].id == id) {
this.data.foodList[i].quantity -= 1;
if (this.data.foodList[i].quantity <= 0) {
this.data.foodList[i].quantity = 0;
}
if (arr.length > 0) {
for (var j in arr) {
if (arr[j].id == id) {
arr[j].quantity -= 1;
if (arr[j].quantity <= 0) {
this.removeByValue(arr, id)
}
if (arr.length <= 0) {
this.setData({
foodList: this.data.foodList,
cartList: [],
totalNum: 0,
totalPrice: 0,
})
this.cascadeDismiss()
}
try {
wx.setStorageSync('cart', arr)
} catch (e) {
console.log(e)
}
}
}
}
}
}
this.setData({
cartList: arr,
foodList: this.data.foodList
})
this.getTotalPrice();
},
外卖点餐列表滑动 微信小程序_点餐小程序购物车效果实现,点餐小程序购物车列表的实现...相关推荐
- 外卖点餐列表滑动 微信小程序_外卖点餐微信小程序的详细解决方案
随着移动互联网的发展,以及人们生活节奏的加快,工作生活之余,大家都习惯通过手机点餐.而这对于许多餐饮企业来说,就完全具备了通过长沙小程序开发,打造外卖点餐小程序的条件.那么接下来,创研科技就给大家谈谈 ...
- 如何自建微信外卖平台_外卖平台高抽成的背后,看小程序如何玩转餐饮外卖?...
都说"懒人经济"能创造市场商机,外卖--正是在懒人经济下催生的产物. 随着互联网行业的蓬勃发展,外卖成为了人们的主流生活方式之一.特别是在疫情的冲击下,外卖的重要性更是被凸显. 因 ...
- vscode中运行2个程序_在64位系统中运行32位或16位程序
由于CPU和系统架构的更新,现行主流的Windows系统已经是64位.然而许多人还恋恋不舍的一些老游戏或老程序已经没有了更新.在64位的系统上运行这些程序,往往会出现运行故障.如何才能解决这个烦心事? ...
- php微擎万能门店小程序_【微擎微赞模块】万能门店小程序6.8.73+小程序前端+后端...
源码介绍 微赞微擎模块万能门店小程序不限制小程序生成数量,支持多页面,预约功能等. 万能门店小程序的宗旨是:小程序设计无需您过问,签到客户后,根据客户所属行业直接选择模板,各板块点击设定不同的样式.颜 ...
- 取景框图片 小程序_怎样用手机给照片加画框?这个小程序可以帮到你,简单好用收藏了...
大家好,我是尚古,这里每天分享精品软件,视频剪辑.创意修图技巧. 1月22号晚,微信 IOS 版正式更新7.0.3版,升级了小程序下拉菜单栏.在微信聊天界面首页的下拉菜单入口时,变成了全屏展示50个& ...
- php微擎万能门店小程序_【微擎微赞模块】万能门店小程序6.6.7完美修复版2套+小程序前端+配置教程...
源码介绍 微赞微擎模块万能门店小程序6.6.7不限制小程序生成数量,支持多页面,预约功能等. 万能门店小程序的宗旨是:小程序设计无需您过问,签到客户后,根据客户所属行业直接选择模板,各板块点击设定不同 ...
- 云合影程序_实战丨与「火箭少女」合影AI小程序的技术实践与思考
和平精英项目与"火箭少女"开启了主题活动.3月18日上线"火箭少女"101与游戏特种兵人脸融合的小程序活动.人脸融合技术由腾讯云AI团队提供支持,采用优图新融合 ...
- python抢课程序_自学Python3个月,写出自动抢课小程序,分享我的学习经验!
很多没有编程基础的同学入门Python没有方法,今天我们就来看看一位小哥自学Python后总结的学习经验,希望对你有所帮助. 我刚学python3个月不到,分享一下我的学习经验. 半年前从某大牛同学那 ...
- java mvc 小程序_[Java教程]Spring MVC 的环境搭建和入门小程序
[Java教程]Spring MVC 的环境搭建和入门小程序 0 2017-02-17 00:00:16 1.1.下载spring框架包. 1.1.1百度搜索Spring Framework. 进入s ...
- java中如何运行小程序_一起学java(一)——运行第一个小程序
接下来的一段时间内会更新一起学java系列,喜欢的关注一下我吧.微信公众号:什么都不懂的大佬:初学,有错误的地方请大家多多指教. ---------------分割线-------------- 一. ...
最新文章
- 继往开来!目标检测二十年技术综述
- php cookie使用实例h5,html5实现数据存储实例代码
- python变量必须以字母和下划线_【转载】关于python中带下划线的变量和函数的意义...
- ubuntu nano用法
- js 语法:JSON.stringify(data, null, 4)
- Flutter入门:设置全局字体
- 岛国人气美少女竟然每晚跟 3 个人通宵打麻将?
- java 创建servlet出错_java-创建applicationContext.xml时出错:在Servlet...
- centos6.5卸载和安装mysql_Linux CentOS 6.5 卸载、tar安装MySQL的教程
- 蔚来事件后 理想和小鹏改了“辅助驾驶系统”官方宣传用词
- linux磁盘iops限制,linux – 我需要多少IOPS?我的工作量瓶颈是存储
- The Economist经济学人是如何使用Go语言构建内容平台微服务架构的?
- doip 源码_DoIP—协议框架
- 爬取超星考试题目_2020超星测试题库导入网课答案
- C# 四舍五入保留两位小数方法总结
- win10电脑外接音响没声音怎么回事?win10电脑外接音响没声音的修复方法
- 2022-2028年中国高通量药物筛选与创新药物行业市场调查研究及发展前景展望报告
- 运行python.exe文件出现AttributeError: module ‘moviepy.audio.fx.all‘ has no attribute ‘audio_fadein‘
- HTML入门笔记(案例+截图)
- MBR+双硬盘(固态+机械)双系统(win+ubuntu21.04)装机教程