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

Posted 2023-04-06 会编程的林俊杰

一、需求：

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

  可以设置一个活跃选项的数据来记录选中选项的下标（默认为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

如何控制多个class添加或去除

问题引入：

　　最近在开发一个小程序项目，在控制css样式的时候遇到个问题

　　微信小程序的class属性中的花括号内{{}}根据条件设置多个class

　　微信小程序本身没有document或者window这些我们平时写html的东西

　　就只能通过数据绑定，在改变数据这个方式了

　　如以下的代码：

<view class="{{istext?‘class1‘:‘class2‘}}">hello world</view>

data: {
    istext:true
  }

 

引入默认的class

<view class="class3 {{istext?‘class1‘:‘class2‘}}">hello world</view>

 

　　只要在双引号内，花括号外面，用空格将他们分开，那么编译后的结果为：

<view class="class3 class1">hello world</view>

动态控制多个class

　　只要在花括号内做三元运算选择相应的class,他们之间用空格隔开就好

<view class="{{}}  {{}}  {{}}">hello world</view>