小程序模板网

黄秀杰教程--灵犀外卖选购页实现切换分类与数量加减

效果图实现以下功能一、 点击分类项,切换右边的食品,并高亮自身这个实现比较简单,给一个states数组,用于记录每一项分类的状态,点击设为true,wxml渲染时三目运算判断即可。categoryStates = categoryStates.map ...

 
 
 

效果图

实现以下功能

一、 点击分类项,切换右边的食品,并高亮自身 
这个实现比较简单,给一个states数组,用于记录每一项分类的状态,点击设为true,wxml渲染时三目运算判断即可。

 

		
  1. categoryStates = categoryStates.map(function (item, i) {
  2. if (index == i) {
  3. item = true;
  4. } else {
  5. item = false;
  6. }
  7. return item;
  8. });

相应的wxml文件,class="{{categoryStates[index] ? 'category-item-active' : ''}}"

二、 加减按钮  初始只有一个加号  点击加号后,相应商品数量+1,并出现减号  减至0时,减号消失,连同数量值

设计数组结构

 

		
  1. cartData: {},它的键是Food表的objectId,值是数量。
  2. 以下是js代码实现
  3. add: function (e) {
  4. // 所点商品id
  5. var foodId = e.currentTarget.dataset.foodId;
  6. console.log(foodId);
  7. // 读取目前购物车数据
  8. var cartData = that.data.cartData;
  9. // 获取当前商品数量
  10. var foodCount = cartData[foodId] ? cartData[foodId] : 0;
  11. // 自增1后存回
  12. cartData[foodId] = ++foodCount;
  13. // 设值到data数据中
  14. that.setData({
  15. cartData: cartData
  16. });
  17. }

在wxml文件中绑定数据如下

 

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

上述代码中,通过wx:if判断当前商品的数量是否存在,无则不显示减号按钮;而在加号按钮旁要显示的数量就是{{cartData[item.objectId]}};点击事件传递的foodId就是{{item.objectId}}

减法按钮类似

 

		
  1. subtract: function (e) {
  2. // 所点商品id
  3. var foodId = e.currentTarget.dataset.foodId;
  4. // 读取目前购物车数据
  5. var cartData = that.data.cartData;
  6. // 获取当前商品数量
  7. var foodCount = cartData[foodId];
  8. // 自减1
  9. --foodCount;
  10. // 减到零了就直接移除
  11. if (foodCount == 0) {
  12. delete cartData[foodId]
  13. } else {
  14. cartData[foodId] = foodCount;
  15. }
  16. // 设值到data数据中
  17. that.setData({
  18. cartData: cartData
  19. });
  20. }

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

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



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18244.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询