微信小程式:點選商品+,出現數量和-
阿新 • • 發佈:2019-01-07
問題描述:
商品列表中只有“+”,點選之後出現“-1+”,可以對數量進行增減,
效果
.wxml
<view class="add-box">
<image src="/image/reduce.png" class="add-img {{item.numbers==0 ?'none':''}}" bindtap="reduceNum" data-index="{{index}}"></image>
<view class="num {{item.numbers==0?'none':''}}" >{{item.numbers}}</view>
<image src="/image/add1.png" class="add-img" bindtap="addNum" data-index="{{index}}" data-index="{{index}}"></image>
</view>
.js
數量是從後臺拿到的一個數據,每次點選“+”使得這個商品的數量自增一,點選“-”則數量自減一,直到數量為0後數量和減號消失
data:{
amount: 0,
index:0,
},
addNum(e) {
let index = e.currentTarget .dataset.index;
let fruitUrl = this.data.fruitUrl;
let numbers = fruitUrl[index].numbers;
numbers = numbers + 1;
fruitUrl[index].numbers = numbers;
this.setData({
fruitUrl: fruitUrl
});
},
reduceNum(e) {
let index = e.currentTarget.dataset.index;
let fruitUrl = this.data .fruitUrl;
let numbers = fruitUrl[index].numbers;
numbers--;
fruitUrl[index].numbers = numbers;
this.setData({
fruitUrl: fruitUrl
})
},