循环语句的使用

小程序中的循环语句 for，就是在.js中定义循环的数组，把要循环的数据写到数组里面，然后再到*.wxml中进行逐一展示就行了。这里结合一下icon标签的属性来演示循环语句的基本使用。
重点需要明白的是：小程序中的 for 是以属性的形式，添加到你想要循环的组建上来实现循环的。

1.先看最终效果

这里写图片描述

2.js 文件中的代码


Page({/*** 页面的初始数据*/data: {//定义学生数组students:[{name:'张山',age:23},{name:'李四',age:24}],//颜色数组iconColor: ['red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'],//icontypeList icon 数组iconTypeList: ['success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn','success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download','info_circle', 'cancel', 'search', 'clear']}  
})

3. *.WXML 中的代码

属性说明：wx:for 的值是数组名、wx:for-item 每一项的名字（默认是 item），wx:for-inex 索引的名字，默认是index

<view><text class='text-font'>1.循环语句的基本用法</text>
</view><block wx:for="{{students}}" wx:for-item="stu" wx:for-index="number"><view><text class='text-font' decode="{{true}}">序号：{{number+1}}&nbsp;&nbsp;</text><text class='text-font'decode="{{true}}">姓名:{{stu.name}}&nbsp;&nbsp;</text><text class='text-font'>年龄:{{stu.age}}</text></view>
</block><view><text class='text-font'>2.循环语句的第一种形式 for 和 item在不通的组件上</text>
</view><block  wx:for="{{iconColor}}"><icon type="success" size="50"color="{{item}}"></icon>
</block><view><text class='text-font'>3.循环语句的第二种形式 for 和 item在相同的组件上</text>
</view><icon wx:for='{{iconTypeList}}' type='{{item}}' size='40'></icon><view><text class='text-font'>4.循环语句的嵌套使用</text>
</view><view><block wx:for="{{iconColor}}" wx:for-item="i"><view><block wx:for="{{iconTypeList}}" wx:for-item="j"><icon type='{{j}}' color='{{i}}'></icon></block></view></block>
</view>