微信小程序:动态控制class属性
一. 需求: 点击一个选项,让其出现不同于其他选项的样式,比如选项文字的颜色变红。
二. 初步解决方案: 可以设置一个活跃选项的数据来记录选中选项的下标(默认为0),其次选中其他选项时可以通过点击事件获取到所选选项的下标,并赋值给活跃选项。要点击的选项是 wx:for 循环出来的,所以接下来就是通过一个三元运算来判断每个循环的元素是否被选中,选中则加特殊样式。
三. 最终解决方案: 在初步解决方案的基础上,在标签中定义 data-index='{{index}}' ,使得选项下标值可以通过事件对象(event)被点击函数获取到。
四. 总结: 原以为,点击的选项是 wx:for 循环出来的,可以直接通过 {{index}} 来做三元运算,但是事件对象(event)并不会通过这样的方式返回给函数,必须依靠 data-index= ' {{index}} ' 。
如有侵权请及时联系我们处理,转载请注明出处来自
推荐文章