介绍/*全局样式*/,
{page
,,填充:20 px 0;,
},
,/*主容器*/,
{.stepper
,,宽度:80 px,,
,,身高:26 px;,/*才能给主容器设一个边框*/,
边境才能:1 px solid # ccc;,
,,这个特性:3 px;,
保证金才能:0,汽车,,
},
,/*加号和减号*/,
{.stepper text
,,宽度:19 px;,
,,行高:26 px;,
,,text-align:中心,,
浮:,才能离开,,
},
,/*数值*/,
{.stepper input
,,宽度:40 px;,
,,身高:26 px;,
浮:,才能离开,,
保证金才能:0,汽车,,
,,text-align:中心,,
,,字体大小:12 px;,/*才能给中间的输入设置左右边框即可*/,
,,border-left: 1 px solid # ccc;,
边境才能:1 px solid # ccc;,
},
,/*普通样式*/,
.normal {.stepper
,,颜色:黑色,,
},
,/*禁用样式*/,
.disabled {.stepper
,,颜色:# ccc;,
} 页面({,
,,数据:{,
,,,//,输入默认是1,
全国矿工工会,,,,,,,
,,,//,使用数据数据对象设置样式名,
,,,minusStatus:, & # 39;残疾人# 39;,
,,},/*,才能点击减号,*/,
,,bindMinus:函数(),{,
,,,var num =, this.data.num;,
,,,//,如果大于1时,才可以减,
,,,if (祝辞num 1), {,
,,,,,num ,,
,,,},
,,,//,只有大于一件的时候,才能正常的状态,否则禁用状态,
,,,var minusStatus =, num & lt;=, 1, ?, & # 39;残疾人# 39;,:,& # 39;正常# 39;,,
,,,//,将数值与状态写回,
,,,this.setData ({,
,,,,,num:, num,,
,,,,,minusStatus:, minusStatus
,,,}),,
,,},/*,才能点击加号,*/,
,,bindPlus:函数(),{,
,,,var num =, this.data.num;,
,,,//,不作过多考虑自增1,
,,,num + +,,
,,,//,只有大于一件的时候,才能正常的状态,否则禁用状态,
,,,var minusStatus =, num & lt;, 1, ?, & # 39;残疾人# 39;,:,& # 39;正常# 39;,,
,,,//,将数值与状态写回,
,,,this.setData ({,
,,,,,num:, num,,
,,,,,minusStatus:, minusStatus
,,,}),,
,,},/*,才能输入框事件,*/,
,,bindManual:函数(e), {,
,,,var num =, e.detail.value;,
,,,//,将数值与状态写回,
,,,this.setData ({,
,,,,,num:, num
,,,}),,
,,},
})
这篇文章给大家分享的是有关微信小程序中如何实现数量加减功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
我们在购买宝贝的时候,购物的数量,经常是我们需要使用的,如下所示:
在宝贝详情页里:
在购物车里:
,
& lt; !——,才能数值,——祝辞,
& lt;才能input 类型=皀umber", bindchange=癰indManual",价值=https://www.yisu.com/zixun/" {{num}} "/>
<文本类=罢！眀indtap=" bindPlus "> +
wxs:
js:
运行结果:
感谢各位的阅读!关于“微信小程序中如何实现数量加减功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
