首页 > 编程 > JavaScript > 正文

微信小程序 动态绑定事件并实现事件修改样式

2019-11-19 16:49:51
字体:
来源:转载
供稿:网友

微信小程序 动态绑定事件并实现事件修改样式

实例代码

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

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表