微信小程序-点击列表选择并做样式高亮

wxml代码

<view class="list">
  <span class="{{data.select?'active':''}}" wx:for="{{lists}}" wx:key="index" id="{{index}}" bindtap='selectOne'>{{item.name}}</span>
</view> 
<view> {{listContent}}</view>

wxss代码

.list{
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

.active{
  background-color: rgb(134, 209, 157);
}

js代码

// pages/views/C/c.js
Page({
  data: {
    lists:[
      {
        name:'list1',
        select:true,
        content:'第一个列表的内容'
      },
      {
        name:'list2',
        select:false,
        content:'第二个列表的内容'
      },
      {
        name:'list3',
        select:false,
        content:'第三个列表的内容'
      },
      {
        name:'list4',
        select:false,
        content:'第四个列表的内容'
      },
    ],
    listContent:''
  },

  selectOne:function(e){
    console.log(e.target.id);
    this.data.lists.map(item =>{
      item.select = false
    })
    this.data.lists[e.target.id].select=true
    this.setData({lists:this.data.lists})
    this.setData({listContent:this.data.lists[e.target.id].content})
  },
  onLoad: function (options) {
    this.setData({listContent:this.data.lists[0].content})
  },
})