微信小程序 动态修改元素class

由于微信小程序无法获取元素dom进行操作,所以利用属性判断来进行更新:

代码:

wxml:

<view class="choose {{num==1?'active':''}}" data-num="1" bindtap="itemClick"></view>
<view class="choose {{num==2?'active':''}}" data-num="2" bindtap="itemClick"></view>
<view class="choose {{num==3?'active':''}}" data-num="3" bindtap="itemClick"></view>
<view class="choose {{num==4?'active':''}}" data-num="4" bindtap="itemClick"></view>
<view class="choose {{num==5?'active':''}}" data-num="5" bindtap="itemClick"></view>

wxss:

.choose {
  ...
}
.choose.active {
  ...
}

js:

Page({

    data: {
        num: 0
    },

    itemClick: function (e) {
        this.setData({
            num: 0
        })
        this.setData({
            num: e.currentTarget.dataset.num
        })
    }
})
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容