本文举例说明了微信小程序外卖页面上切换分类和加减量的功能。分享给大家参考，如下：

关于微信小程序外卖界面实现购买、切换、分类、数量加减功能的开发步骤：

翻译

实现以下功能

首先，点击分类项目，切换右边的食物，突出显示自己

这个实现相对简单。给出一个状态数组来记录每个类别的状态。点击设置为真，可以通过三眼操作判断wxml渲染。

categoryStates=categoryStates . map(函数(item，I){ if(index==I){ item=true；} else { item=false}退货项目；});对应的wxml文件

class='{{categoryStates[index]？'类别-项目-活动' : ''}} '二。加减按钮

最初只有一个加号

点击加号后，对应的商品数量为1，出现减号

当减为0时，负号和数量值一起消失

设计阵列结构

CartData: {}，它的键是Food表的objectId，它的值是quantity。

以下是js代码实现

Add:函数(e) {//已订购商品id var fooid=e . current target . dataset . fooid；console . log(food id)；//读取当前购物车数据var cart data=that . data . cart data；//获取当前商品数量var foodcount=cartdata [foodind]？cart data[food id]: 0；//增加1后保存cart data[food ind]=food count；//将数据数据中的值设置为that . setdata({ cart data : cart data })；}将数据绑定在wxml文件中，如下所示

view class='stepper '！-减号-view class=' symbol减法' wx: if=' {{cartdata [item。objectid]}}'-/view！-quantity-view class=' value“{ cart data[item。objectid]}}/view！-加号-view class=' symbol add ' bind tap=' add ' data-food-id=' { { item。objectid}}'/view/view在上述代码中，用wx:if判断当前商品数量是否存在，没有则不显示减号按钮；加号按钮旁边显示的数量是{ { cart data[item]。objectid]} }；点击事件传递的foodId为{{item.objectId}}

减法按钮类似

减法器：函数(e) {//订购商品id var fooid=e . current target . dataset . fooid；//读取当前购物车数据var cart data=that . data . cart data；//获取当前商品数量var food count=cart data[food ind]；//减去1-food count；//移除if(food count==0){删除cart data[food ind]} else { cart data[food ind]=food count；}//将数据数据中的值设置为that . setdata({ cart data : cart data })；}减法和加法基本类似。值得一提的是，减法需要判断非负合法性，所以元素在降为零时会通过删除操作直接移除，省去了后期提交购物车遍历总结的非零判断的繁琐。

待办事项列表购物车动画购物车逻辑将数据提交到后端存储

希望本文对微信小程序的开发有所帮助。