微信小程序实现动态添加class的功能,其实这样做就可以了

在微信小程序中,实现一个循环列表某些元素动态添加class,以设置选中状态的功能

**思路:**网页中可能使用document.getElementById().addClass()实现,但是在小程序中无法使用document获取元素。小程序可以构造一个数据结构,根据业务需求动态修改数据去判断是否添加选中样式。具体代码如下:

//index.wxml
<view wx:for="{
    
    {sheets}}" wx:key="index" data-dang="{
    
    {item.dang}}" bindtap="clickSheetItem" class="index-item {
    
    {item.isFill ? 'fill' : ''}}">
    {
    
    {
    
    item.dang}}
</view>
//index.js
data:{
    
    
	sheets:[
		{
    
     dang:1, isFill:false },
		{
    
     dang:1, isFill:false },
		{
    
     dang:1, isFill:false },
	],
}

猜你喜欢

转载自blog.csdn.net/qq_44415875/article/details/129946809