微信小程序——for循环遍历

以components中创建的ForComp 和pages中的features为例

features.json

{
    "usingComponents": {
        "if-comp":"/components/IfComp/IfComp",
        "for-comp":"/components/ForComp/ForComp"
    },
    "navigationBarTitleText": "语法特点",
    "navigationBarBackgroundColor": "#FFF",
    "navigationBarTextStyle": "black"
}

 features.wxml

<view>===========条件渲染=============</view>
<if-comp />
<view>===========循环遍历=============</view>
<for-comp />

ForComp.js

Component({
    data:{
        list:["a","b","c"],
        stuList:[
            {id:1,name:"zhang",score:90},
            {id:2,name:"li",score:80},
            {id:3,name:"wang",score:70},
        ]
    }
})

ForComp.wxml

<view>--------使用默认索引、元素-------</view>
<view wx:for="{
   
   {list}}" wx:key="*this">
    索引:{
   
   {index}} 元素:{
   
   {item}}
</view>

<view>--------自定义索引、元素-------</view>
<view wx:for="{
   
   {list}}" wx:key="*this" wx:for-index="idx" wx:for-item="v">
    索引:{
   
   {idx}} 元素:{
   
   {v}}
</view>

<view wx:for="{
   
   {stuList}}" wx:key="id">
    索引:{
   
   {index}} 元素:{
   
   {item.id}} {
   
   {item.name}} {
   
   {item.score}}
</view>

注意绿色框出的ws：key=“”，可以参考  列表渲染 | 微信开放文档 (qq.com)

 简单来说就是，当需要遍历的列表是由单个字符串、布尔值等构成时候，使用*this即可。但是当列表是由数组组成的，key需要选取独一无二的那个特性。比如说上面的stuList例子，这个列表由多个学生信息组合而成，一个元素里面包含一个学生的学号、名字、成绩。由于名字、成绩可能会重复，但是学号不会，所以选择 id 作为key

运行效果