小程序实现点击变色功能

• 使用 wx:for 循环输出要展示的内容 ，wx:for会得到一个key, index 为元素的下标

  <view  wx:for="{{title}}" wx:key="index">{{item}}</view>

• 设置 data- ，此为HTML通用元素，接收一个自定义参数，此时view下标为自动循环的

  <view wx:for="{{title}}" wx:key="index" data-index="{{index}}">{{item}}</view>

• 通过 双括号语法判断 index 的下标，并添加一个点击事件

  <view bindtap="add" class="{{ index === current ? 'active' : '' }}" wx:for="{{title}}" wx:key="index" data-index="{{index}}">{{item}}</view>

• e.currentTarget.dataset.xxx 可以获取自定义data-的下标 ```javascript const app = getApp()

Page({ data: { title:[‘小程序1’,’小程序2’,’小程序3’,’小程序4’,’小程序5’,’小程序6’], current:null }, onLoad:function(){ },

add(e){ this.setData({current : e.currentTarget.dataset.index })

}

}) ``` 再添加一个class事件就完成了