小程序列表循环渲染：动态控制子项样式
本文介绍如何在小程序中，根据子项状态动态调整列表项的显示样式，例如图片示例所示。 为了实现灵活的样式控制，我们将结合 wx:for 循环和条件渲染技术。
假设列表数据 itemList 中每个子项都包含一个 status 属性，用于指示子项的状态（例如：已完成、未完成）。我们可以通过以下方法实现样式控制：
- 使用
wx:for循环遍历列表：
<code class="wxml"><view wx:for="{{itemList}}" wx:key="id">
<view class="{{ getItemClass(item.status) }}">{{item.content}}</view>
</view></code>
- 使用 WXS 函数动态设置 class： WXS 提供了在 WXML 中进行数据处理的能力，避免了在 JavaScript 中进行繁琐的逻辑处理。
<code class="wxs">function getItemClass(status) {
if (status === 'done') {
return 'done';
} else if (status === 'todo') {
return 'todo';
} else {
return 'default'; // 默认样式
}
}
module.exports.getItemClass = getItemClass;</code>
在这个例子中，getItemClass 函数根据 status 属性返回不同的 class 名称。 done、todo 和 default 分别对应不同的 CSS 样式类。 通过在 view 元素的 class 属性中调用此函数，即可动态设置子项的样式。
-
定义 CSS 样式： 在你的 CSS 文件中定义
done、todo和default样式类。例如：
<code class="css">.done {
text-decoration: line-through;
color: gray;
}
.todo {
color: blue;
}
.default {
/* 默认样式 */
}</code>
通过以上步骤，小程序将根据每个子项的 status 属性，自动应用相应的 CSS 样式，从而实现动态控制列表项显示效果。 这种方法清晰、高效，并且易于维护。
