这个问题并非难点,只是我因为习惯性思维,通过变量去实现时思路受限,并在此困惑良久,所以做个记录。
如图,类型包括后面的数量选择,是来自数据库的 for 循环加载出来的,我们要实现的是点击任意一个数量加减,而不影响其他。
wxml:
<!--page/test/test.wxml-->
<view class='dateM'>
<view class='item rowBox' wx:for="{{ProductList}}">
<view class='dateML rowCon'>
<view class=''>
<text class='fs17 pr10'>{{item.ProductName}}</text>
<text class='fs12 c38bafe'>{{item.isCancel}}</text>
</view>
<view class='mt5 cff4040 fs13'>
<text class='pr10'>同行价 ¥4/4</text>
<text>团队价 ¥4/5 </text>
</view>
</view>
<view class='dateMR rowBox'>
<view class="reduce" data-tag="{{item.TagId}}" data-id='{{index}}' catchtap="reduceNum">
<text class="iconfont icon-jian"></text>
</view>
<view class="num">
<block wx:if="{{item.count}}">
<input data-id="{{index}}" type="number" value="{{item.count}}" disabled/>
</block>
<block wx:else>
<input data-id="{{index}}" type="number" value="0" disabled/>
</block>
</view>
<view class="add active" data-tag="{{item.TagId}}" data-id='{{index}}' catchtap="addNum">
<text class="iconfont icon-jia"></text>
</view>
</view>
</view>
</view>
js:
// page/test/test.js
Page({
data: {
"ProductList": [ //产品集合
{
"ProductName": "标准间", //产品名称
"isCancel": "可以取消", //是否可取消[0可以,1不可以]
"isAutoConfirm": "人工确认", //是否自动确认[0人工确认,1自动确认]
"DayStatus": 0, //当日房态[0正常,1关闭]
"DayJsPrice": "电询", //当日结算价
"DayGpPrice": "电询", //当日团队价
"DayNum": 0, //当日房间数量
'TagId': 85,
'ProductId': 101
},
{
"ProductName": "大床房",
"isCancel": "可以取消",
"isAutoConfirm": "人工确认",
"DayStatus": 0,
"DayJsPrice": "电询",
"DayGpPrice": "电询",
"DayNum": 0,
'TagId': 86,
'ProductId': 103
},
{
"ProductName": "双人间",
"isCancel": "可以取消",
"isAutoConfirm": "人工确认",
"DayStatus": 0,
"DayJsPrice": "电询",
"DayGpPrice": "电询",
"DayNum": 0,
'TagId': 87,
'ProductId': 104
}
]
},
addNum: function (e) {
var tag = e.currentTarget.dataset.tag,
id = e.currentTarget.dataset.id;
if (!this.data.ProductList[id].count){
var countVal = 0;
countVal++;
var count = 'ProductList['+id+'].count';
this.setData({
[count]: countVal
})
console.log(this.data.ProductList[id].count)
} else {
var countVal = this.data.ProductList[id].count;
countVal++;
var count = 'ProductList[' + id + '].count';
this.setData({
[count]: countVal
})
}
}
})
wxss:
/* page/test/test.wxss */
/* 弹性盒子属性 --横向*/
.rowBox{ display:-webkit-box; display:-webkit-flex; -webkit-flex-flow:row;}
.rowCon{ -webkit-box-flex: 1;-webkit-flex: 1;flex: 1; }
/* 弹性盒子属性 --竖向*/
.verBox{ display:-webkit-flex; -webkit-box-orient: vertical;-webkit-flex-flow: column;flex-flow: column;}
.fs08 {font-size:16rpx;}
.fs10 {font-size:20rpx;}
.fs11 {font-size:22rpx;}
.fs12 {font-size:24rpx;}
.fs13 {font-size:26rpx;}
.fs14 {font-size:28rpx;}
.fs15 {font-size:30rpx;}
.fs16 {font-size:32rpx;}
.fs17 {font-size:34rpx;}
.fs18 {font-size:36rpx;}
.fs19 {font-size:38rpx;}
.fs20 {font-size:40rpx;}
.fs21 {font-size:42rpx;}
.fs22 {font-size:44rpx;}
.fs23 {font-size:46rpx;}
.fs24 {font-size:48rpx;}
.fs25 {font-size:50rpx;}
.fs26 {font-size:52rpx;}
.fs28 {font-size:56rpx;}
.fs30 {font-size:60rpx;}
.ml5 {margin-left:5px;}
.pr10 {padding-right:10px;}
.dateM{
width: 100%;
padding: 20rpx;
box-sizing: border-box;
}
.dateM .item{
padding: 16rpx 0;
}
.dateM .dateMR .reduce,
.dateM .dateMR .add{
position: relative;
top: 20rpx;
text-align: center;
width: 56rpx;
height: 56rpx;
line-height: 60rpx;
color: #ddd;
font-size: 20rpx;
}
.dateM .dateMR .reduce.active,
.dateM .dateMR .add.active{
color: #fec93d;
}
.dateM .dateMR .reduce text,
.dateM .dateMR .add text{
font-size: 40rpx;
display: inline-block;
}
.dateM .dateMR .num{
position: relative;
top: 22rpx;
text-align: center;
width: 50rpx;
height: 56rpx;
line-height: 56rpx;
}
.dateM .dateMR .num input{
text-align: center;
width: 50rpx;
height: 56rpx;
line-height: 56rpx;
font-size: 28rpx;
}