小程序模板网

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

作者:xiaochun365,来自原文地址 
//wxml

 

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

//js

 

				
  1. var reportTypeList = [
  2. { name: "日报1", id: "1" },
  3. { name: "目录2", id: "2" },
  4. { name: "季报3", id: "3" },
  5. { name: "月报4", id: "4" },
  6. { name: "日报5", id: "5" },
  7. { name: "目录6", id: "6" },
  8. { name: "季报7", id: "7" },
  9. { name: "月报8", id: "8" },
  10. { name: "日报9", id: "9" },
  11. { name: "目录10", id: "10" },
  12. { name: "季报11", id: "11" },
  13. { name: "月报12", id: "12" }]
  14.  
  15. var pageObject = {
  16. data: {
  17. reportTypeList: reportTypeList,
  18. num: 0,
  19. toLeftNum: 0,
  20. itemWidth: 150
  21. }
  22. }
  23.  
  24. for (var i = 0; i < reportTypeList.length; i++) {
  25. (function (item) {
  26. pageObject['bind' + item.id] = function (e) {
  27. var id = parseInt(e.currentTarget.dataset.typeid)
  28.  
  29. this.setData({
  30. currentId: id
  31. })
  32. }
  33. })(reportTypeList[i])
  34. }
  35.  
  36. Page(pageObject)

//wxss

 

				
  1. /**index.wxss**/
  2.  
  3. .reportTypeScroll {
  4. margin: 40px 0px 20px 0px;
  5. white-space: nowrap;
  6. display: flex;
  7. }
  8.  
  9. .clickSel {
  10. color: red;
  11. }
  12.  
  13. .removeSel {
  14. color: black;
  15. }
  16.  
  17. text {
  18. height: 150rpx;
  19. display: inline-block;
  20. text-align: center;
  21. }


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23522.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询