微信小程序 选中之后修改某个值

167 阅读1分钟

小程序的新手,特别新

摸索了半天,如果有人不幸看到了我乱七八糟的代码,请不要揍我,谢谢

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;}