微信小程序 充值页面

最近做了充值的页面如下图所示

里面选择的做法
wxml:

// class用到了三元运算符来判断当点击的时候改变被点击金额框的样式
<view class="rechargelist">
   <view wx:for="{
   {rechargelist}}" class="item {
   {index == Select ? active: ''}}"  bindtap="recharge" data-id="{
   {index}}"  wx:key="index">￥{
   {
   item.sum}}</view>
</view> 

js:

// class用到了三元运算符来判断当点击的时候改变被点击金额框的样式
page({
   
	data:{
   
		rechargelist:[{
   id:0,sum:'20'},{
   id:1,sum:'40'},{
   id:2,sum:'60'},{
   id:3,sum:'100'},{
   id:4,sum:'200'},{
   id:5,sum:'500'}],
		select:''
	}
	// 充值金额
  recharge(e) {
   
    for(var i=0;i<this.data.rechargelist.length;i++){
   
      if (e.currentTarget.dataset.id == this.data.rechargelist[i].id) {
   
        this.setData({
   
          Select:e.currentTarget