小程序开发--排他点击

购物车选项–退款原因

.wxml

<view> 
   <text style='color:#000;font-size:26rpx'>退款原因</text>
</view>     
<view class='reason'>      
  <block wx:for="{{reason}}">        
   <text id="{{index}}" data-text='{{item}}' bindtap='selectBtn'>          
   <block wx:if="{{index==clickId}}">            
      <text class='reason_item' style='background:#ff0000;color:#fff'>{{item}}</text>          
   </block>          
   <block wx:else>            
      <text class='reason_item' style='background:#fff;color:#ff0000'>{{item}}</text>          
   </block>        
   </text>      
 </block>    
</view>

.js

data: {    
  clickId: -1,
  reason: ['不需要服务了', '买错了', '服务质量不满意', '想购买其他服务项目', '其他原因'],   
},
 // 点击选中 变色  
selectBtn(event) {    
   var text = event.currentTarget.dataset.text;    
   this.setData({      
      clickId: event.currentTarget.id,   
   })  
},

.wxss

/* 退款信息 */
 .reason {
  padding: 10rpx 30rpx;
}
.reason_item {
  display: inline-block;  
  height: 20rpx;  
  line-height: 20rpx;  
  padding: 20rpx;  
  border: 1rpx solid #80c587;  
  color: #1ecc8b;  
  border-radius: 30rpx;  
  margin-right: 30rpx;  
  margin-bottom: 30rpx;
}

看完文章的小伙伴，照例还是分享一下心里话：
不要因为别人的态度而影响心情，因为那样只有你自己会不开心。或许有时只是你自己想多了而已，每个人都会有心情不好的时候啊！
就像我上次说的，突然之间又和以前一样了。一切的烦恼都是我自找的，所以…自己开心最重要，没什么大不了的。