微信小程序:data-index取下标动态控制class

功能是当点击某个选项时,那个选项就高亮,大概是这样的:

查阅资料发现可以在标签里设置data-index,绑定一个点击事件,传参ev,通过ev.target.dataset.index来取;



在wxml的text标签里,我绑定了data-index属性,之后在父级标签动态绑定了class:{{crt==index?'current':''}},在js里创建了一个crt来接收下标,并把currentIndex函数里num的值实时传给crt,这样就保证了点击哪一个选项下边都是相等的,最后用了三元表达式来动态赋值给class,这样功能就实现了,下一步是右边数据展示和左右侧的联动,坑还很多,加油

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 微信小程序由于适用性强、逻辑简要、开发迅速的特性,叠加具有海量活跃用户的腾讯公司背景,逐渐成为了轻量级单一功能应用...
    纯文笔记阅读 4,109评论 1 9
  • 因新工作主要负责微信小程序这一块,最近的重心就移到这一块,该博客是对微信小程序整体的整理归纳以及标明一些细节点,初...
    majun00阅读 7,427评论 0 9
  • 作者:叶小钗https://www.cnblogs.com/yexiaochai/p/9419368.html 前...
    grain先森阅读 2,535评论 0 13
  • 指尖轻碰着三月的茸芽 丝缕的颤动在心间徘徊 慵懒了全身的每个毛孔 眼很乖地闭了上 …… 柳条儿拨一撮长发 轻轻的拂...
    小胡巴阅读 321评论 19 28
  • 门前的两行花开了。 我却已经叫不出名字来, 曾经是你留在这儿,放在心头的挚爱, 如今都远了, 光阴随着花间的雨水渗...
    啾悦阅读 159评论 0 1