微信小程序点击增加或减少商品数量
时间: 2023-09-15 17:17:54 浏览: 132
要实现微信小程序中的商品数量增加或减少,你可以采用以下步骤:
1. 在 WXML 文件中,设置一个输入框和两个按钮,分别用于增加和减少商品数量。例如:
```
<view class="num-box">
<button class="minus" bindtap="minusNum">-</button>
<input class="num" bindinput="inputNum" value="{{num}}" type="number" />
<button class="plus" bindtap="plusNum">+</button>
</view>
```
2. 在 JS 文件中,设置一个变量来存储商品数量,并编写两个函数来处理增加和减少数量的逻辑。例如:
```
Page({
data: {
num: 1
},
plusNum: function() {
this.setData({
num: this.data.num + 1
});
},
minusNum: function() {
if (this.data.num > 1) {
this.setData({
num: this.data.num - 1
});
}
},
inputNum: function(e) {
this.setData({
num: parseInt(e.detail.value)
});
}
})
```
3. CSS 样式可以按照自己的需求进行设置,例如:
```
.num-box {
display: flex;
align-items: center;
}
.num-box .minus,
.num-box .plus {
width: 30px;
height: 30px;
border: 1px solid #ccc;
background-color: #fff;
font-size: 20px;
color: #333;
text-align: center;
line-height: 30px;
}
.num-box .num {
width: 60px;
height: 30px;
border: 1px solid #ccc;
background-color: #fff;
font-size: 16px;
color: #333;
text-align: center;
}
```
这样,当用户点击增加或减少按钮时,商品数量会相应增加或减少,并在输入框中显示。如果用户手动输入数量,也会实时更新。
阅读全文