本次以实战案例为大家讲解:
有如下微信小程序代码:
<view class="all" data-index="{{index}}" bindtap="showAll">{{item.showAll ? '▲收起内容▲' : '▼点击查看所有专业▼'}}</view>
若要在显示"▲收起内容▲"时修改底色,可以通过动态添加一个CSS类来控制样式。以下是一个示例代码,展示了如何在WXML中使用条件渲染来动态添加类,并在WXSS中定义这个类的样式。
首先,在WXSS(或者你的样式文件中)定义两个类,一个用于正常状态,一个用于修改底色的状态:
/* wxss文件 */
.all {
/* 其他样式 */
}
.all-collapse {
background-color: #yourColor; /* 替换成你想要的颜色 */
/* 其他想要修改的样式 */
}
然后,在WXML中使用三元运算符动态添加类:
<!-- wxml文件 -->
<view class="all {{item.showAll ? 'all-collapse' : ''}}" data-index="{{index}}" bindtap="showAll">
{{item.showAll ? '▲收起内容▲' : '▼点击查看所有专业▼'}}
</view>
在这个例子中,当item.showAll
为true
时,all-collapse
类将被添加到<view>
元素上,从而改变其底色。当item.showAll
为false
时,只有all
类会被应用,all-collapse
类则不会被添加。
确保在你的WXSS文件中定义了.all-collapse
类,并且替换了#yourColor
为你想要的颜色值。这样,当点击事件触发,item.showAll
的值发生变化时,视图的底色也会相应地发生变化。