微信小程序——购物车数字加减
发布时间:2020-12-16 23:47:23 所属栏目:百科 来源:网络整理
导读:上一篇,我们有讲到如何造一个购物车弹层。今天来说一下,购物车数量的加减如何实现。 主要思路就是在data里面定义一个属性,属性值就是这个数量。点击+的时候就+1,点击-的时候就-1,再结合setData更改这个数字。当数字等于1的时候,要给-的按钮添加一个dis
上一篇,我们有讲到如何造一个购物车弹层。今天来说一下,购物车数量的加减如何实现。 主要思路就是在data里面定义一个属性,属性值就是这个数量。点击+的时候就+1,点击-的时候就-1,再结合setData更改这个数字。当数字等于1的时候,要给-的按钮添加一个disabled的属性。 wxml代码: <view class=‘row item-center‘> <button class="buy-num-btn btn-minus" disabled="{{minusStatus}}" plain=‘ture‘ bindtap=‘minusNum‘>-</button> <input class=‘buy-num-txt‘ type=‘number‘ value=‘{{courseCount}}‘></input> <button class="buy-num-btn btn-add" plain=‘ture‘ bindtap=‘addNum‘>+</button> </view> ? 样式文件我就不展示了,自己发挥~ js代码: Page({ /** * 页面的初始数据 */ data: { minusStatus: true,courseCount: 1,},//数字加1 addNum: function() { var courseCount = this.data.courseCount; courseCount++; this.setData({ courseCount: courseCount,minusStatus: false }) },//数字减1 minusNum: function() { var courseCount = this.data.courseCount; if (courseCount > 1) { courseCount--; } //数字<=1时,开启 - 按钮的disable状态 var minusStatus = courseCount <= 1 ? true : false; this.setData({ courseCount: courseCount,minusStatus: minusStatus }); } }) ? 给大伙瞅瞅效果: ? ? 4不4感觉超~~简单的~~ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |