需求:
- 至少选择一件
- 最多选择3件
这个比较简单,就不多说了,直接上代码
wxml
<!-- 商品数量 --> <view class=‘shop-number‘> <view class=‘shop-number-left‘> <view class=‘shop-number-left-name‘>购买数量</view> <view class=‘shop-number-left-desc‘>每人限购3件</view> </view> <view class=‘shop-number-right‘> <view class="shop-number-right-reduce {{payPopUp.minusBtn?‘disable-btn‘:‘‘}}" bindtap=‘minusCount‘>-</view> <view class=‘shop-number-right-input‘>{{payPopUp.submited.pay_number}}</view> <view class="shop-number-right-plus {{payPopUp.addBtn?‘disable-btn‘:‘‘}}" bindtap=‘addCount‘>+</view> </view> </view>
js
data: { payPopUp: { submited: { pay_number: 1, }, addBtn: false, minusBtn : true, } }, // 增加 addCount: function() { let pay_number = this.data.payPopUp.submited.pay_number; if (pay_number != 3) { this.setData({ [‘payPopUp.submited.pay_number‘]: ++pay_number, [‘payPopUp.minusBtn‘]: false }) if (pay_number == 3) { this.setData({ [‘payPopUp.addBtn‘]: true }) } } }, // 减少 minusCount: function() { let pay_number = this.data.payPopUp.submited.pay_number; if (pay_number != 1) { this.setData({ [‘payPopUp.submited.pay_number‘]: --pay_number, [‘payPopUp.addBtn‘]: false }) if (pay_number == 1) { this.setData({ [‘payPopUp.minusBtn‘]: true }) } } }
wxss
/* 购买数量 */ .shop-number { width: 670rpx; height: 120rpx; padding: 20rpx 0; box-sizing: border-box; display: flex; justify-content: space-between; border-bottom: 1rpx solid #f2f2f2; } .shop-number-left { width: 220rpx; height: 80rpx; } .shop-number-left-name { line-height: 40rpx; font-size: 34rpx; } .shop-number-left-desc { line-height: 40rpx; font-size: 22rpx; color: rgb(250, 99, 39); } .shop-number-right { width: 300rpx; display: flex; height: 80rpx; padding: 5rpx 0; box-sizing: border-box; } .shop-number-right view{ line-height: 70rpx; height: 70rpx; width: 100rpx; text-align: center; box-sizing: border-box; border: 1rpx solid #f2f2f2; } .shop-number-right-reduce { /* background: yellow; */ border-radius: 10rpx 0 0 10rpx; border-right: 0; } .shop-number-right-input { /* background: red; */ border-left: 0; border-right: 0; } .shop-number-right-plus { /* background: goldenrod; */ border-radius: 0 10rpx 10rpx 0; border-left: 0; } .shop-number-right-reduce,.shop-number-right-plus{ line-height: 60rpx !important; } .disable-btn { background: #f1f1f1; }
原文地址:https://www.cnblogs.com/cap-rq/p/10087048.html
时间: 2024-10-08 00:54:17