1. 什么是列表渲染
列表渲染是指将一个数组中的数据通过一定的规则渲染到页面上形成一个列表。在微信小程序中，我们使用WXML的标签语法来实现列表渲染，最常用的标签是<block>和<wxs>。其中，<block>用于包裹整个列表，而<wxs>是一种类似于JavaScript的脚本语言，用于在WXML中添加逻辑功能。
1.1 <block>标签的使用
<block>标签是一个容器标签，它的作用与<div>类似，用于包裹一段代码。通常情况下，我们使用<block>来包裹整个列表。在列表中，每一项使用<block wx:for="{{array}}">进行循环渲染。其中`wx:for`是WXML中的一个指令，用于循环遍历数组中的每一项数据，`array`是我们定义的数组名称。
下面是一个简单的使用示例：
<block wx:for="{{array}}">
<view> {{item}} </view> // 这里的item就是遍历时的每一项数据
</block>
在以上示例中，我们使用`wx:for`循环遍历了一个名为`array`的数组，并在每次循环中将数组中的元素渲染到页面上。
1.2 <wxs>标签的使用
<wxs>是一个新的标签，它是一种类似于JavaScript的脚本语言，在WXML中可以使用它来添加逻辑功能，比如在列表中对每一项数据进行特定操作。
以下是<wxs>的使用示例：
<wxs module="m1">
var sort = function(array) {
return array.sort();
}
module.exports = {
sort: sort
}
</wxs>
<!-- 在WXML中直接使用m1即可 -->
<block wx:for="{{m1.sort(array)}}">
<view> {{item}} </view>
</block>
在以上示例中，我们使用<wxs>定义了一个函数sort，该函数用于对数组进行排序操作。接着，在WXML中，我们使用`m1.sort(array)`来调用该函数，并将其返回的结果传递给`wx:for`进行渲染。
2. 小程序使用示例
下面我们来看一个完整的微信小程序列表渲染示例。该示例中，我们将渲染一个包含学生姓名和成绩的列表，并将成绩通过判断加上不同的颜色。
<view class="container">
<block wx:for="{{students}}" wx:key="index">
<view class="item">
<view class="name">姓名：{{item.name}}</view>
<view class="score" style="color:{{item.score >= 60 ? 'green' : 'red'}};">
成绩：{{item.score}}</view>
</view>
</block>
</view>
<script>
Page({
data: {
students: [
{ name: '张三', score: 80 },
{ name: '李四', score: 50 },
{ name: '王五', score: 90 },
{ name: '赵六', score: 30 },
{ name: '钱七', score: 65 },
]
}
})
</script>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.item {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 80vw;
margin-bottom: 8px;
border: 1px solid #ddd;
padding: 8px;
}
.name {
font-size: 16px;
}
.score {
font-size: 14px;
}
</style>
在以上示例中，我们定义了一个包含五个学生信息的数组，包含学生姓名和成绩。通过`wx:for`循环遍历，我们将每个学生的信息渲染到了页面上，并通过判断成绩大小来动态设置颜色。
3. 总结
本文主要介绍了微信小程序中列表渲染的相关内容，通过<block>和<wxs>标签的使用，我们可以轻松地渲染出一个复杂的列表，并对其中数据进行处理和操作。对于开发者来说，熟练掌握列表渲染的相关知识是十分重要的，希望本文能够对大家有所帮助。