微信小程序 动态绑定事件 且通过事件修改样式

//wxml

<scroll-view class="reportTypeScroll" scroll-x="true" scroll-left="{{toLeftNum}}">
  <block wx:for-items="{{reportTypeList}}" wx:key="{{index}}">
    <text type="primary" style="width:{{itemWidth}}rpx;" bindtap="bind{{item.id}}" data-typeid="{{item.id}}" class="{{currentId==item.id?'clickSel':'removeSel'}}">{{item.name}}</text>
  </block>
</scroll-view>

//js

var reportTypeList = [
  { name: "日报1", id: "1" },
  { name: "目录2", id: "2" },
  { name: "季报3", id: "3" },
  { name: "月报4", id: "4" },
  { name: "日报5", id: "5" },
  { name: "目录6", id: "6" },
  { name: "季报7", id: "7" },
  { name: "月报8", id: "8" },
  { name: "日报9", id: "9" },
  { name: "目录10", id: "10" },
  { name: "季报11", id: "11" },
  { name: "月报12", id: "12" }]

var pageObject = {
  data: {
    reportTypeList: reportTypeList,
    num: 0,
    toLeftNum: 0,
    itemWidth: 150
  }
}

for (var i = 0; i < reportTypeList.length; i++) {
  (function (item) {
    pageObject['bind' + item.id] = function (e) {
      var id = parseInt(e.currentTarget.dataset.typeid)

      this.setData({
        currentId: id
      })
    }
  })(reportTypeList[i])
}

Page(pageObject)

//wxss

/**index.wxss**/

.reportTypeScroll {
  margin: 40px 0px 20px 0px;
  white-space: nowrap;
  display: flex;
}

.clickSel {
  color: red;
}

.removeSel {
  color: black;
}

text {
  height: 150rpx;
  display: inline-block;
  text-align: center;
}