微信小程序-外卖选购页实现切换分类与数量加减
来源:互联网 发布:阿里云哪个区域好 编辑:程序博客网 时间:2024/05/21 00:15
关于微信小程序外卖界面实现选购切换分类与数量加减功能开发步骤:
效果图
实现以下功能
一、 点击分类项,切换右边的食品,并高亮自身
这个实现比较简单,给一个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
购物车动画
购物车逻辑
提交数据到后端存储
阅读全文
3 0
- 微信小程序-外卖选购页实现切换分类与数量加减
- Jquery仿美团外卖等食品选择页面购物车数量加减功能实现
- 微信小程序之购物数量加减 —— 微信小程序实战商城系列(3)
- 机械键盘分类与选购技巧
- 微信小程序外卖平台,免费下载小程序外卖源代码
- 微信小程序的外卖demo
- jQuery实现购物车物品数量的加减
- Android利用布局实现伪自定义商品数量加减控件
- jQuery实现购物车物品数量的加减
- jquery快速实现商品数量加减的方法
- jQuery实现购物车物品数量的加减
- JQuery实现购物车数量加减总价累加
- 自定义view继承LinearLayout实现购物车数量的加减
- 微信小程序开发--购物车动画与加减
- jq数量加减效果
- js数量加减效果
- 购物车数量加减
- vue商品数量加减
- Java 集合系列14之 Map总结(HashMap, Hashtable, TreeMap, WeakHashMap等使用场景)
- 2017年极客学院大数据工程师全套 视频 代码 课件
- C++中的static关键字的总结
- Java中String、StringBuffer和StringBuilder的区别详解
- openssl命令行汇总
- 微信小程序-外卖选购页实现切换分类与数量加减
- c++中“::”和“:”啥意思
- LeetCode刷题【Array】 Maximum Average Subarray I
- Assets/spine-unity/Editor/SkeletonBaker.cs(803,21): error CS0619: ....升级Unity2017 问题解决
- sqlserver 中with(nolock)详解
- extern 用法,全局变量与头文件(重复定义)
- 推荐算法——基于物品的协同过滤算法
- Java 集合系列15之 Set架构
- 101. Symmetric Tree