日志
小程序实现商品数量加减案例
||
用微信小程序原生代码实现商品数量加减。
<!-- 减号 -->
<text class="sign {{num <= 1 ? 'disabled' : 'normal'}}" bindtap="delCount" data-index="{{index}}">-</text>
<!-- 数值 -->
<input class="number" type="number" value="{{num}}" disabled="disabled"/>
<!-- 加号 -->
<text class="sign {{num >= 10 ? 'disabled' : 'normal'}}" bindtap="addCount" data-index="{{index}}">+</text>
</view>
/*加号和减号*/
.stepper .sign {
/*数值*/
.stepper .number {
/*普通样式*/
.stepper .normal{
/*禁用样式*/
.stepper .disabled{
/**
* 页面的初始数据
*/
data: {
/* 加数 *//* 减数 */
delCount: function (e) {
1、页面布局
<view class="stepper"><!-- 减号 -->
<text class="sign {{num <= 1 ? 'disabled' : 'normal'}}" bindtap="delCount" data-index="{{index}}">-</text>
<!-- 数值 -->
<input class="number" type="number" value="{{num}}" disabled="disabled"/>
<!-- 加号 -->
<text class="sign {{num >= 10 ? 'disabled' : 'normal'}}" bindtap="addCount" data-index="{{index}}">+</text>
</view>
2、添加页面wcss样式
.stepper { width:130px;}
height: 40px;
/*给主容器设一个边框*/
border: 1rpx solid #818284;
border-radius: 3px;
margin:20px auto;
background: white;
/*加号和减号*/
.stepper .sign {
width: 40px;}
line-height: 40px;
text-align: center;
float: left;
/*数值*/
.stepper .number {
width: 48px;}
height: 40px;
float: left;
margin: 0 auto;
text-align: center;
font-size: 16px;
color: #000000;
/*给中间的input设置左右边框即可*/
border-left: 1rpx solid #818284;
border-right: 1rpx solid #818284;
/*普通样式*/
.stepper .normal{
color: black;}
/*禁用样式*/
.stepper .disabled{
color: #ccc;}
3、js数据交互
- 初始化数字
* 页面的初始数据
*/
data: {
num:1
},
- addCount 点击“+”号，增加数字
addCount: function (e) {
console.log("刚刚您点击了加1");var num = this.data.num;// 总数量-1if (num < 1000) {
this.data.num++;
}// 将数值与状态写回this.setData({
num: this.data.num
});
}
- delCount 点击“-”号，减少数字
delCount: function (e) {
console.log("刚刚您点击了减1");
var num = this.data.num;
// 商品总数量-1
if (num > 1) {
this.data.num--;
}
// 将数值与状态写回
this.setData({
num: this.data.num
});
},
- 完成
