点餐小程序购物车效果实现,点餐小程序购物车列表的实现
本文摘要
微信小程序点餐系统我们会用到购物车功能,添加菜品到购物车,以及点击数量加减,那么这种点餐小程序购物车效果要如何实现,下面为大家介绍。 自己的第一个点餐
微信小程序点餐系统我们会用到购物车功能,添加菜品到购物车,以及点击数量加减,那么这种点餐小程序购物车效果要如何实现,下面为大家介绍。
自己的第一个点餐小程序,主要包括左右菜单联动、点击数量加减、菜单和购物车数量可以同步加减、购物车动画等,纯前端实现
大致的功能样式如下图展示:
代码块
主要代码块:
// 点击左侧分类切换右侧菜品
changeRightMenu: function (e) {
var classify = e.target.dataset.id;// 获取点击项的id
var foodList = tShopfas.data.foodList;
var allFoodList = tShopfas.data.allFoodList;
var newFoodList = [];
if (classify == 0) {//选择了全部选项
tShopfas.setData({
curNav: classify,
foodList: allFoodList
})
} else { //选择了其他选项
for (var i in allFoodList) {
if (allFoodList[i].catid == classify) {
newFoodList.push(allFoodList[i])
}
}
tShopfas.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 tShopfas.data.foodList) {// 遍历菜单找到被点击的菜品,数量加1
if (tShopfas.data.foodList[i].id == id) {
tShopfas.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(tShopfas.data.foodList[i]);
}
} else {
arr.push(tShopfas.data.foodList[i]);
}
try {
wx.setStorageSync('cart', arr)
} catch (e) {
console.log(e)
}
break;
}
}
tShopfas.setData({
cartList: arr,
foodList: tShopfas.data.foodList
})
tShopfas.getTotalPrice();
},
// 定义根据id删除数组的方法
removeByValue: function (array, val) {
for (var i = 0; i 0) {
for (var j in arr) {
if (arr[j].id == id) {
arr[j].quantity -= 1;
if (arr[j].quantity
第二部分:如何开通一个小商店
相关文章
****更多行业产品开发方案,请关注 加速度JSUDO***
<以上资讯仅供参考,如果您需解决具体问题,建议您关注作者;如果有软件产品开发需求,可在线咨询加速度产品经理获取方案和报价>
加速度是一家专注于为企/事业单位的供应链提供数字化营销/服务的公司,产品线涵盖线上营销策划、商城开发、智慧园区、智能客服和企微SCRM系统,应用于营销推广-线上交易-销售管理-物流配送和服务支持等,致力于帮助企业开发更具投资价值的“数字”资产产品。
添加客服微信获取更多内容










