微信小程序 for循环添加样式1

Posted 2020-10-25 橘子king

 

wxml:

<view class=\'kjcz_list\'> 
    <block wx:for="{{kjcz_object}}" wx:key="{index}">
    <view class="kjcz_content {{num==index?\'current\':\'\'}}" catchtap=\'switchTab\'  data-index="{{index}}">
      <view>{{item.kjcz_cz}}</view>
      <view class=\'{{item.h_class}}\'>赠送：{{item.kjcz_zs}}元</view>
    </view>
    </block> 
    <view class="kjcz_content {{define==false?\'current\':\'\'}}" catchtap=\'switchTab1\'>
      <view>自定义金额</view>
    </view>
  </view> 
  <view class=\'look_data\'>点击查看余额/充值记录</view>
  <view class=\'dz_m\'>到账金额：¥{{totalNum}}</view>
  <view class=\'zf_now\'>立即充值({{czNum}})</view>

 

js:

data: {
    num:0,
    czNum:2000,
    define:true,
    totalNum:2100,
    kjcz_object:[
      {
        kjcz_cz:"2000元",
        kjcz_zs:"100",
      },
      {
        kjcz_cz: "5000元",
        kjcz_zs: "1000"
      },
      {
        kjcz_cz: "10000元",
        kjcz_zs: "3000"
      },
      {
        kjcz_cz: "20000元",
        kjcz_zs: "10000"
      },
      {
        kjcz_cz: "5000元",
        kjcz_zs: "1000"
      }
    ]
  },
  switchTab: function (e) {
    let index = parseInt(e.currentTarget.dataset.index);
    var that = this
    var cz_num = that.data.kjcz_object[index].kjcz_cz;
    cz_num=parseInt(cz_num.substring(0,cz_num.length-1));
    var kjcz_zs=parseInt(that.data.kjcz_object[index].kjcz_zs);
    var cz_total=cz_num+kjcz_zs;
    // console.log(cz_num)
    that.setData({
      num: index,
      czNum: cz_num,
      define:true,
      totalNum:cz_total
    })
  },
  switchTab1:function(e){
    var that=this;
    let define = that.data.define;
     define=!define;
    that.setData({
      define:define,
      num:5
    })
  },