微信小程序 動態綁定事件并實現事件修改樣式

實例代碼

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; } 

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！