小程式訂房、點餐時for迴圈載入資料並選擇數量互不影響的功能實現
阿新 • • 發佈:2018-12-06
這個問題並非難點,只是我因為習慣性思維,通過變數去實現時思路受限,並在此困惑良久,所以做個記錄。
如圖,型別包括後面的數量選擇,是來自資料庫的 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; }