本文实例讲述了微信小程序外卖选购页实现切换分类与数量加减功能。分享给大家供大家参考,具体如下:
关于微信小程序外卖界面实现选购切换分类与数量加减功能开发步骤:
效果图
实现以下功能
一、 点击分类项,切换右边的食品,并高亮自身
这个实现比较简单,给一个states数组,用于记录每一项分类的状态,点击设为true,wxml渲染时三目运算判断即可。
categoryStates = categoryStates.map(function (item, i) { if (index == i) { item = true; } else { item = false; } return item; });
相应的wxml文件
class="{{categoryStates[index] "
二、 加减按钮
初始只有一个加号
点击加号后,相应商品数量+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] "htmlcode"><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
购物车动画
购物车逻辑
提交数据到后端存储希望本文所述对大家微信小程序开发有所帮助。
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。