微信小程序创建动态class（取下标控制和具体值控制class两种方式）

##1.创建动态class

#####（1）通过wx:for列表渲染出来的class切换
wxml

view>

js

Page({data: {num: null//创建一个值来接收index的值，这里默认没有，你也可以选择你默认选中的下标},changEvent: function (e) {let changeIndex = e.currentTarget.dataset.index//通过e.currentTarget.dataset来获取 data-xx传过来的数据this.setData({//通过setData赋值，这样wxml里面就可以进行比较，完成动态效果num: changeIndex})}
})

wxss

.collectActive{
/*这里面写你的动态样式 */color:#fff
}

#####(2)数量少，具体值切换
wxml :

 <view class="collectTypeBox flex"><text class="flex {{num==0?'collectActive':''}}" bindtap="personalCollect" data-type="0">旅行text><text class="flex {{num==1?'collectActive':''}}" bindtap="personalCollect" data-type="1">摄影text>view>

wxss:

/* 你想要的样式*/
.collectActive{color:#fff;
}

总结：由于微信小程序开发不同于以往的普通web开发, 无法通过js获取wxml文件的dom结构，但可以通过微信小程序数据绑定以及view标签的”data-xx“自定义属性去更改标签类名,传值，传值通过wxml设置data-[参数名]传递参数，[参数名]只能是小写，不能有大写；
这两个例子的唯一区别就是一个传的是渲染的index值，一个是具体数字，在js里面创建的num来接收data-xx的值，点击事件发生时实时更新赋值，这样就保证了点击哪一个选项下边都是相等的，最后用了三元表达式来动态赋值给class，功能就实现啦~

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！