微信小程序开发教程：三元运算符动态添加类属性，根据用户的选择改变CSS样式

最新推荐文章于 2024-04-18 16:28:40 发布

原创最新推荐文章于 2024-04-18 16:28:40 发布 · 1.8k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #css #小程序

微信小程序开发教程（nodejs后端）专栏收录该内容

15 篇文章

订阅专栏

本文通过实例讲解了如何在微信小程序中使用条件渲染和动态添加CSS类，实现在显示特定内容时修改底色的效果，包括WXML中的三元表达式和WXSS中的样式定义。

本次以实战案例为大家讲解：

有如下微信小程序代码：

<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的值发生变化时，视图的底色也会相应地发生变化。