微信小程序外卖选购页实现切换分类与数量加减功能案例

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了微信小程序外卖选购页实现切换分类与数量加减功能案例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2170字，纯文字阅读大概需要4分钟。

内容图文

本文实例讲述了微信小程序外卖选购页实现切换分类与数量加减功能。分享给大家供大家参考，具体如下：

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

效果图

实现以下功能

一、 点击分类项，切换右边的食品，并高亮自身

这个实现比较简单，给一个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' : ''}}"

二、 加减按钮

初始只有一个加号

点击加号后，相应商品数量+1，并出现减号

减至0时，减号消失，连同数量值

设计数组结构

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

以下是js代码实现

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文件中绑定数据如下

<view class="stepper">
<!-- 减号 -->
<view class="symbol subtract" wx:if="{{cartData[item.objectId]}}">-</view>
<!-- 数量 -->
<view class="value">{{cartData[item.objectId]}}</view>
<!-- 加号 -->
<view class="symbol add" bindtap="add" data-food-id="{{item.objectId}}">+</view>
</view>

上述代码中，通过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] = foodCount;
}
// 设值到data数据中
that.setData({
cartData: cartData
});
}

减法与加法基本类似，值得一提的是，减法要判断非负的合法性，所以将自减至零时，直接将元素通过delete操作移除，省去后续提交购物车遍历汇总的非零判断的烦琐。

Todo List
购物车动画
购物车逻辑
提交数据到后端存储

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

内容总结

以上是互联网集市为您收集整理的微信小程序外卖选购页实现切换分类与数量加减功能案例全部内容，希望文章能够帮你解决微信小程序外卖选购页实现切换分类与数量加减功能案例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端