用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

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

纸飞机 2018-3-8 09:34

作者:xiaochun365,来自原文地址 //wxml {{item.name}} //jsvar reportTypeList = var pageObject = { data: { reportTypeList: reportTypeList, num: 0, toLeftNum: 0, ...

作者:xiaochun365,来自

原文地址


//wxml

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

//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. var pageObject = {
  15. data: {
  16. reportTypeList: reportTypeList,
  17. num: 0,
  18. toLeftNum: 0,
  19. itemWidth: 150
  20. }
  21. }
  22. for (var i = 0; i < reportTypeList.length; i++) {
  23. (function (item) {
  24. pageObject['bind' + item.id] = function (e) {
  25. var id = parseInt(e.currentTarget.dataset.typeid)
  26. this.setData({
  27. currentId: id
  28. })
  29. }
  30. })(reportTypeList[i])
  31. }
  32. Page(pageObject)

//wxss

  1. /**index.wxss**/
  2. .reportTypeScroll {
  3. margin: 40px 0px 20px 0px;
  4. white-space: nowrap;
  5. display: flex;
  6. }
  7. .clickSel {
  8. color: red;
  9. }
  10. .removeSel {
  11. color: black;
  12. }
  13. text {
  14. height: 150rpx;
  15. display: inline-block;
  16. text-align: center;
  17. }
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏