二十.wxml语法-列表渲染

系统管理员 2023-07-09 02:21 26阅读 0赞

# 列表渲染 #

## 一.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/>`标签上, 以渲染一个包含多节点的结构块.

## 四.wx:key ##

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

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

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

## 五.注意 ##

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

等同于

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