以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
运行效果
文章来源:https://www.toymoban.com/news/detail-714535.html
文章来源地址https://www.toymoban.com/news/detail-714535.html
到了这里,关于微信小程序——for循环遍历的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!