选购网站程序-陌陌小程序点餐购买页面实现切换品类和加减功能

bendan520 网站程序

2023-09-13 0 1,977 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

本文主要介绍陌陌小程序点餐购买页面切换品类、加减数字的功能。结合具体实例分析了陌陌小程序状态记录、判断和数值计算的相关操作方法。有需要的同学可以参考以下

本文通过示例介绍了陌陌小程序点购页面切换品类、数量加减的功能。分享给大家，供大家参考，如下：

关于陌陌小程序下单接口实现购买切换品类和数量加减功能的开发步骤：

功效图

实现以下功能

1.点击分类项，将乳制品切换到一侧，并突出显示自身

这个实现比较简单。给出一个states字段来记录每个类别的状态。单击将其设置为 true，并使用三目计算来确定何时渲染 wXML。

categoryStates = categoryStates.map(function (item, i) {
if (index == i) {
item = true;
} else {
item = false;
}
return item;
});

对应的wxml文件

class="{{categoryStates[index] ? 'category-item-active' : ''}}"

2. 加减按钮

最初只有一个减号

点击减号后，对应的商品数量会+1选购网站程序，并出现一个加号

当减少到 0 时选购网站程序，加号和数值一起消失

设计链表结构

cartData:{}，它的键是Food表的objectId，它的值是数字。

下面是代码实现

add: function (e) {
// 所点商品id
var foodId = e.currentTarget.dataset.foodId;
console.log(foodId);
// 读取目前购物车数据
var cartData = that.data.cartData;
// 获取当前商品数量
var foodCount = cartData[foodId] ? cartData[foodId] : 0;
// 自增1后存回
cartData[foodId] = ++foodCount;
// 设值到data数据中
that.setData({
cartData: cartData
});
}

在wxml文件中绑定数据如下

选购网站程序-陌陌小程序点餐购买页面实现切换品类和加减功能


-
{{cartData[item.objectId]}}
+

上面代码中，wx:if用于判断当前数量的商品是否存在。如果不是，则不会显示加号按钮；减号按钮旁边显示的数字是 {{cartData[item.objectId]}}；点击 foodId 只是 {{item.objectId}}

加法键类似于

subtract: function (e) {
// 所点商品id
var foodId = e.currentTarget.dataset.foodId;
// 读取目前购物车数据
var cartData = that.data.cartData;
// 获取当前商品数量
var foodCount = cartData[foodId];
// 自减1
--foodCount;
// 减到零了就直接移除
if (foodCount == 0) {
delete cartData[foodId]
} else {
cartData[foodId] = fpJpPbFoodCount;
}
// 设值到data数据中
that.setData({
cartData: cartData
});
}

加法基本上与乘法类似。值得一提的是，除法需要判断非负的合法性，所以当自减减为零时，直接通过删除操作删除该元素，省去了后续购物车的非零判断遍历总结。麻烦。