小程序的新手,特别新
摸索了半天,如果有人不幸看到了我乱七八糟的代码,请不要揍我,谢谢
wxml
<view class="cbottom"> <view class="dbox {{item.xz}}" wx:for="{{dlist}}" wx:key="{{index}}" data-id="{{item.id}}" bindtap="select" > <text class="money">{{item.money}}元</text> <text class="dian">{{item.dian}}点<text class="present">送{{item.present}}点</text></text> <view class="select"><text class="cuIcon-check wtcheck"></text></view> </view> </view>js
data: { dlist:[ { id:1, money:98, dian:100, present:10, xz:'' }, { id:2, money:198, dian:200, present:40, xz:'' }, { id:3, money:425, dian:500, present:150, xz:'' }, { id:4, money:850, dian:1000, present:500, xz:'' }, ], }, select:function(e){ var ids = e.currentTarget.dataset.id; var array = this.data.dlist; array.forEach( (item,index,arr) => { var id = ids-1; var index = index+1; var indexs = index-1; // console.log(id,ids,index,indexs) var sItem = "dlist["+ indexs + "].xz"; this.setData({ [sItem]: " " }) // console.log(e); if(index == ids) { // var index = index-1; var oSelected = "dlist[" + id + "].xz"//这里需要将设置的属性用字符串进行拼接 this.setData({ [oSelected]: "xz" }) } }) },wxss
.cbottom{ width: 100%; height: 285rpx;}.dbox{ width: 48%; background: #f3f4f6; height: 128rpx; float: left; margin-right: 13rpx; margin-bottom: 19rpx; padding: 25rpx; border-radius: 7rpx; }.money{ font-weight:bold; display: block; margin-bottom: 5rpx;}.dian{ font-size: 23rpx;}.present{ color: #009687;}.xz{ border:1px solid #009687; background: #dbe8ee; position: relative;}.xz view{ display: block !important;}.select{ border-radius: 100% 0 0 0; background: #009687; width: 40rpx; height: 40rpx; position: absolute; bottom: 0; right: 0; text-align: center; padding: 10rpx; }.wtcheck{ color: #fff;}.dbox view{ display: none;}