小程序点击列表当前项高亮显示

效果图

注意: 如果说你想点击当前项任意地方都能实现高亮，你就要在当前项最外层的盒子设置点击事件，并用data-的方式传递所需要的参数

wxml:
1. 使用block是不想在外层多包一层view盒子，block和vue中template用法一样，不会再html结构中渲染
2. 用data-的方式传递当前id

<block wx:for="{{list}}" wx:key="id" wx:for-item="item">
  <view class="list-every {{currentIndex == item.id ? 'active' : ''}}" 
  bindtap="clickCurrent" data-id="{{item.id}}">
    <text>{{item.content}}</text>
  </view>
</block>

wxss:

.list-every {
  height: 80rpx;
  line-height: 80rpx;
  padding-left: 40rpx;
}
.active {
  background-color: #169bd5;
}

js:
1. 用for循环的方式得到一个列表。
2. 在这里需要用e.currentTarget.dataset获取值，而不是使用e.target.dataset

data: {
  list: [],
  currentIndex: null
},
// 点击高亮
clickCurrent(e) {
  const {id} = e.currentTarget.dataset
  this.setData({
    currentIndex: id
  })
},
onLoad(options) {
  let list = this.data.list
  for(var i = 1; i <= 20; i++) {
    list.push({
      content: '小程序如何高亮显示' + i,
      id: i
    })
 }
 this.setData({
   list
 })