1. 数组列表渲染：
通过 wx:for 可以对数组进行遍历渲染，生成多个模板内容。
<!-- WXML 中的数组列表渲染 -->
<view wx:for="{{items}}" wx:for-item="item" wx:for-index="index">
{{index + 1}}. {{item}}
</view>
在逻辑层中：
// 逻辑层中的数据
Page({
data: {
items: ['Apple', 'Banana', 'Orange']
}
})
2. 对象列表渲染：
对于对象，可以使用 wx:for 进行遍历渲染，生成多个模板内容。同时，使用 wx:key 指定唯一标识符，提高渲染性能。
<!-- WXML 中的对象列表渲染 -->
<view wx:for="{{students}}" wx:for-item="student" wx:key="id">
{{student.name}} - {{student.age}} years old
</view>
在逻辑层中：
// 逻辑层中的数据
Page({
data: {
students: [
{ id: 1, name: 'Alice', age: 20 },
{ id: 2, name: 'Bob', age: 22 },
{ id: 3, name: 'Charlie', age: 18 }
]
}
})
3. 数组的索引和元素：
在列表渲染过程中，通过 wx:for-index 和 wx:for-item 可以获取数组的索引和元素。
<!-- WXML 中的数组索引和元素 -->
<view wx:for="{{items}}" wx:for-item="item" wx:for-index="index">
{{index + 1}}. {{item}}
</view>
4. 条件渲染：
通过 wx:if、wx:else 和 wx:elif 实现条件渲染，可以根据不同的条件渲染不同的内容。
<!-- WXML 中的条件渲染 -->
<view wx:for="{{items}}">
<view wx:if="{{item.startsWith('A')}}">This item starts with 'A': {{item}}</view>
<view wx:else>This item does not start with 'A': {{item}}</view>
</view>
5. block 块级渲染：
使用 block 块级标签可以包裹多个节点，实现条件渲染或多个节点的统一控制。
<!-- WXML 中的 block 块级渲染 -->
<block wx:for="{{items}}">
<view>Item: {{item}}</view>
<view>Index: {{index}}</view>
</block>
以上是关于微信小程序列表渲染的一些基本概念和用法。列表渲染是小程序中常见的场景，通过灵活运用可以实现各种复杂的列表展示效果。
转载请注明出处：http://www.zyzy.cn/article/detail/769/微信小程序