微信小程序循环点击切换样式

wxml

  
    
      {{item.name}}
    
  

wxss

.map_head {
  width: 100%;
  display: flex;
  background-color: #FFFFFF;
}

.map_head view {
  width: 15%;
  text-align: center;
  padding-top: 2%;
  padding-bottom: 2%;
}

.blue {
  font-weight: 600;
}

.blue1 {
  border-bottom: 2px solid #2979ff;
  font-weight: 600;
  color: #2979ff;
}

js

Page({
  data: {
    currindex: 1, // 默认值
    list: [
      {
        id: 1,
        name: "张三"
      },
      {
        id: 2,
        name: "李四"
      },
      {
        id: 3,
        name: "王五"
      },
    ]
  },
  map_name: function (e) {
    this.setData({
      currindex: e.currentTarget.dataset.id,
    });
  }
})