微信小程序_列表渲染

#列表渲染#

>列表渲染：

        >wx:for 列表渲染单个组件

                >在组件上使用wx:for控制属性绑定一个数组，即使用可在数组中各项的数据重复渲染该组件。

                >数组当前项的下标变量名默认为index。

                >数组当前的元素变量名默认为item。

        >示例代码：

<view wx:for="{{arr}}">
    {{index}}:{{item.message}}
</view>

Page({
    data:{
        arr:[{
            message:'第0个元素'，
        }，{
            message:'第1个元素'
        }]
    }
})

               >使用wx:for-item可以指定数组当前元素的变量名。

                >使用wx:for-index可以指定数组当前下标的变量名。

        >示例代码：

<view wx:for="{{arr}}"> wx:for-index="id" wx:for-item="i_name">
    {{id}}:{{i_name}}.message
</view>

        >block wx:for 列表渲染多个组件

                >wx:for应用在某一个组件上，如果渲染一个包含多节点的结构块，这时wx:for需要使用在<block/>标签上。

        >示例代码：

<block wx:for="{{[1,2,3]}}">
    <view>{{index}}:</view>
    <view>{{item}}  </view>
</block>

        >wx:key 指定唯一标识符

                >如果列表中项目的位置会动态改变或有新的项目添加到列表中，并且列表中的项目保持自己的特征和状态，例：

                        <input/>中的输入内容。

                        <switch/>的选中状态。

                >需要使用wx:key来指定列表中项目的唯一标识。

                >wx:key的值以两种方式提供。

                        >字符串：代表在for循环的array中的item的某个property,该property的值需要是列表中唯一的字符串或数字，且不能动态改变。

                        >保留关键字：

                                *this代表在for循环中的item本身，这种表示需要item本身是一个唯一的字符串或者数字。

                                当数据改变触发渲染层重新渲染的时候，会校正带有key的组件。

                                框架会确保它们会被重新排列，而不是重新创建，以确保组件保持自身的状态，并且提高列表渲染时的效率。

        >示例代码：

<switch wx:for="{{arr}}" wx:key="unique">
    {{item.id}}
</switch>

Page({
    data:{
        arr:[
            {id:0,unique:'u_0'},
            {id:1,unique:'u_1'},
            {id:2,unique:'u_2'},
            {id:3,unique:'u_3'},
        ]
    }
})

---

注意：如果不提供wx:key,会报一个warning,如果明确知道该列表是静态的，或者不必关注其顺序，可以选择忽略。

---

#学无止境#