微信小程序遍历循环中点击添加样式

.wxml中:
<block wx:for="{{searchSongList}}" wx:key='unique'> 
        <block wx:if="{{index == clickId}}">
          <view class="result-item" style="background:{{color}}" id="{{index}}" bindtap="chooseLocation" data-data="{{item}}">
            <text class="title" >{{item.NVC_PROVINCE}}{{item.NVC_SERVICE_NAME}}---{{item.NVC_FARM_NAME}}</text>  
          </view>
        </block>
        <block wx:else>
           <view class="result-item" id="{{index}}" bindtap="chooseLocation" data-data="{{item}}">
             <text class="title">{{item.NVC_PROVINCE}}{{item.NVC_SERVICE_NAME}}---{{item.NVC_FARM_NAME}}</text>  
           </view>
        </block>
      </block>


.js中:
chooseLocation: function (event) {
    let that = this
    var cla = event.currentTarget.id
    that.setData({
      'color': '#00EEEE',
      'clickId':cla
    });
}


效果如下图:每次选择其中一个就会改变他的背景色

猜你喜欢

转载自blog.csdn.net/tengqingyong/article/details/78924253