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

##1.创建动态class

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

<!--data-xx:这个属性是我们需要传给js的值， 创建一个点击事件，接收data-index传的index值-->
	<view class="{{num==index?'collectActive':''}}" bindtap="changEvent" " data-index="{{index}}" </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">
    <!-- 下面num是条件， collectActive是动态class名称，bindtap点击事件获取 data-type传过来的值  -->
        <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，功能就实现啦~