微信小程序：动态控制class属性

一、需求：

点击一个选项，让其出现不同于其他选项的样式，比如选项文字的颜色变红。
二、初步解决方案：

可以设置一个活跃选项的数据来记录选中选项的下标（默认为0），其次选中其他选项时可以通过点击事件获取到所选选项的下标，并赋值给活跃选项。要点击的选项是 wx:for 循环出来的，所以接下来就是通过一个三元运算来判断每个循环的元素是否被选中，选中则加特殊样式。

js：

cateActive: '0',    // 活跃选项下标clickCate(e) {console.log(e)this.setData({cateActive: e.currentTarget.dataset.index})},

wxml：

<view class='task_cate'><view wx:for='{{cateArr}}' class='cate_item' wx:key='cate' bindtap='clickCate'><view class='cate_icon'><image src='../../images/{{item.icon}}.png'></image></view><view class='cate_text {{index == cateActive ? "cate_text_active" : ""}}'>{{item.text}}</view></view></view>

果不其然，出现问题了。不管怎么点击，只有第一个选项是红色的。

经过排查，看到控制台的信息如下：

可以看出，currentTarget.dataset中并没有我们所需要的值。通过查阅资料，使用 data-index 可以将选项的下标值通过事件对象（event）反馈给函数，也就是 e 。

三、最终解决方案：

在初步解决方案的基础上，在标签中定义 data-index='{{index}}'，使得选项下标值可以通过事件对象（event）被点击函数获取到。

通过这个小小的改动即可成功解决。

四、总结：

原以为，点击的选项是 wx:for 循环出来的，可以直接通过 {{index}} 来做三元运算，但是事件对象（event）并不会通过这样的方式返回给函数，必须依靠 data-index='{{index}}'。

微信小程序：动态控制class属性相关推荐

微信小程序实现watch属性监听数据变化
Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动:监听属性 watch. 虽然watch的滥用会导致性能不佳,但在一些情况下我们还是需要watch,使得代码更加简洁.逻辑更加清晰(其 ...
微信小程序的tabBar属性
在微信小程序当中的app.json文件当中.是指下方的导航栏, 在tabBar里面有一个list数组,在这个数组里面的值就是表示在下方导航栏的值. 如下代码所示:(给出一个小的数组值) "l ...
微信小程序---wxss常用属性
以下内容均为个人理解,主要用于备忘 -–前言即废话篇--- 微信小程序的代码和网页编程非常相似,两者都有JS.JSON文件,同时WXML=>HTML,WXSS=>CSS. 附上两条链接:w ...
微信小程序wxss布局属性-全
尺寸 1.高度 2.宽度 3.设置方法像素值百分比背景 1.backgroung 2.background-attachment:图像是否固定,或随着页面的其余部分滚动 3.bacground- ...
微信小程序长按属性
<view bindtap="btn" bindlongpress="longpress" >66666666666 </view> / ...
【微信小程序】vertical属性、文章列表
微信小程序，实现 watch 属性，监听数据变化
转自微信小程序,实现 watch 属性,监听数据变化目标在微信小程序实现 watch 属性,监听 data 中的属性,当被监听属性的值改变时,执行我们指定的方法. 思路 Vue 的 compu ...
微信小程序的如何使用全局属性 —— 微信小程序教程系列（5）
微信小程序提供了app.js文件,用于放置一些全局的函数和全局的属性. 一般情况下,我都会把一些常用的函数和属性写在app.js文件内,这样不用在页面之间传值,或者不用重复加载. 下面以全局属性为例 ...
php小程序地图处理,微信小程序地图map详解及简单实例
微信小程序地图map 微信小程序map 地图属性名类型默认值说明longitudeNumber中心经度 latitudeNumber中心纬度 scaleNumber1缩放级别 markersArra ...
[转]微信小程序之购物车 —— 微信小程序实战商城系列（5）
本文转自:http://blog.csdn.net/michael_ouyang/article/details/70755892 续上一篇的文章:微信小程序之商品属性分类 -- 微信小程序实战商城 ...

微信小程序：动态控制class属性

微信小程序：动态控制class属性相关推荐

最新文章

热门文章