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

来源:互联网 发布:apache 允许显示目录 编辑:程序博客网 时间:2024/05/29 14:15


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


1 0
原创粉丝点击