微信小程序购物车数量加减功能的实现

前端之家收集整理的这篇文章主要介绍了微信小程序购物车数量加减功能的实现前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

 

分享图片

 

实现一个简单的数量增减功能

1.wxml

<view class=‘stepper sum‘>
<text class=‘{{minusStatus}}‘ type=‘number‘ bindtap=‘bindMinus‘>-</text>
<input bindinput=‘bindManual‘ value=‘{{num}}‘></input>
<text bindtap=‘bindPlus‘>+</text>
</view>
2.wxcss

/*全局样式*/
page {
padding: 20px 0;
}
/*主容器*/
.stepper {
width:80px;
height:26px;
margin: 0 auto;
border: 1px solid #ccc;
border-radius: 3px;
}
/*加号和减号*/
.stepper text {
float: left;
width: 19px;
line-height: 26px;
text-align: center;
}
/*数值*/
.stepper input {
width: 40px;
height: 26px;
float: left;
margin: 0 auto;
text-align: center;
font-size: 12px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
/*普通样式*/
.stepper .normal {
color:black;
}
/*禁用样式*/
.stepper .disable {
color: #ccc;
}

3.js

//index.js
//获取应用实例
const app = getApp()

Page({ data: { num:1,minusStatus:‘disable‘ },//事件处理函数 /*点击减号*/ bindMinus: function() { var num = this.data.num; if (num>1) { num--; } var minusStatus = num>1 ? ‘normal‘:‘disable‘; this.setData({ num:num,minusStatus:minusStatus }) },/*点击加号*/ bindPlus: function() { var num = this.data.num; num++; var minusStatus = num > 1 ? ‘normal‘ : ‘disable‘; this.setData({ num:num,minusStatus: minusStatus }) },/*输入框事件*/ bindManual: function(e) { var num = e.detail.value; var minusStatus = num > 1 ? ‘normal‘ : ‘disable‘; this.setData({ num:num,minusStatus: minusStatus }) }})

猜你在找的XML相关文章