微信小程序

微信小程序动态绑定样式

class="singer_item {{ count === index ? ‘singer_chexk’:’’}}"是重点

<scroll-view scroll-x="true">
    <view class="singer_">
      <view wx:for="{{singer}}" wx:key="{{id}}" wx:index="{{index}}" class="singer_item">
        <view class="singer_item {{ count === index ? 'singer_chexk':''}}" data-singer_id="{{item.id}}" bindtap="check" data-index="{{index}}">{{item.name}}</view>

样式

.singer_chexk{
  /* background: red; */
  border-bottom:3rpx solid #FF0000;
}
.singer_item{
  height: 57rpx;
color: #A2A3A4;
width: 165rpx;
line-height: 60rpx;
font-size: 24rpx;
margin: 0 1%;
text-align: center;
/* border-bottom:5rpx solid #FF0000; */
}

js 同过点击事件 count: e.currentTarget.dataset.index,

check(e){
    let singer_id = e.currentTarget.dataset
    this.setData({
      count: e.currentTarget.dataset.index,
      singer_id 
    })
    console.log(this.data.count);
    // console.log(e)
    // console.log(singer_id)
  }