二十.wxml语法-列表渲染

列表渲染

一.wx:for

1. 在组件上使用wx:for控制属性绑定一个数组, 即使用数组中各项的数据重复渲染该组件.
2. 默认数组的当前项的下标变量名默认为index, 数组当前项的变量名默认为item.

<!-- 遍历一维数组 -->
<view wx:for="{{array}}">
	{{index}}:{{item}}
</view>

<!-- 遍历二维数组 -->
<view wx:for="{{array}}">
    <view wx:for="{{item}}">
    	{{index}}:{{item}}
    </view>
</view>

二.给item、index起名字

起名字要符合命名规则

1. 使用wx:for-item可以指定数组当前元素的变量名.
2. 使用wx:for-index可以指定数组当前小标的变量名.

<view wx:for="{{array}}" wx:for-index="i" WX:for-item="itemName">
    {{i}}:{{itemName}}
</view>

<!-- 九九乘法表 -->
<view wx:for="{{[1,2,3,4,5,6,7,8,9,]}}" wx:for-item="i">
	<view wx:for="{{[1,2,3,4,5,6,7,8,9,]}}" wx:for-item="=j">
		<view wx:if="{{i <= j}}">
        	{{i}} * {{j}} = {{i * j}}
        </view>
    </view>
</view>

三.block wx:for

类似block wx:if, 也可以将wx:for用在<block/>标签上, 以渲染一个包含多节点的结构块.

<block wx:for="{{nums}}">
	<block wx:for="{{item}}">
    	<view>{{item}}</view>
    </block>
</block>

四.wx:key

wx:key是列表中项目的唯一标识符`

wx:key的值以两种形式提供:

1. 字符串, 代表在for循环的array中item的某个property, 该property的值需要是列表中唯一的字符串或数字, 且不能动态改变.
2. 保留关键字*this代表在for循环中的item本身, 这种表示需要item本身是一个唯一的字符串或数字.

五.注意

1. 当wx:for的值为字符串时, 会将字符串解析成字符串数组

<view wx:for="array">
	{{item}}
</view>

等同于

<view wx:fo="{{['a','r','r','a','y']}}">
	{{item}}
</view>

2. 花括号和花括号之间如果有空格, 将最终被解析称为字符串