微信小程序列表渲染（遍歷）

列表渲染（遍歷）

　　在組件上使用 wx:for 控制屬性綁定一個數組，即可使用數組中各項的數據重復渲染該組件。默認數組的當前項的下標變量名默認為 index，數組當前項的變量名默認為 item。

<!--logs.wxml-->
<view class="log-list">

    <view class="arr">
        <text>遍歷數組對象：</text>
        <view wx:for='{{items}}' wx:key="index">
            {{index}}：{{item.name}}
        </view>
    </view>
    <view class="number">
        <text>遍歷數字：</text>
        <view wx:for="{{10}}" wx:key="index"> {{index}}：{{item}} </view> </view> <view class="object"> <text>遍歷對象：</text> <view wx:for="{{object}}" wx:key="index"> {{index}}：{{item}} </view> </view> <view class="double"> <text>雙層for循環</text> <view wx:for="{{items}}" wx:key="index"> {{item.name}} <view wx:for='{{item.name}}' wx:for-item='items' wx:for-index='indexs' wx:key="indexs"> {{indexs}}：{{items}} </view> </view> </view> </view>

對應log.js

// logs.js
const util = require('../../utils/util.js')

Page({
  data: {
    items: [
      {value: 'first', name: "局勢已無法挽回"}, {value: 'second', name: "人民有信仰，國家有力量，民族有希望"}, {value: 'third', name: "快出殘影"}, ], object:{ value: 'first', name: "局勢已無法挽回", number:3 } }, onLoad() { } })

Key

　　如果列表中項目的位置會動態改變或者有新的項目添加到列表中，並且希望列表中的項目保持自己的特征和狀態（如 <input/> 中的輸入內容， <switch/> 的選中狀態），需要使用 wx:key 來指定列表中項目的唯一的標識符。

wx:key 的值以兩種形式提供：

1. 字符串，代表在 for 循環的 array 中 item 的某個 property，該 property 的值需要是列表中唯一的字符串或數字，且不能動態改變。
2. 保留關鍵字 this 代表在 for 循環中的 item 本身，這種表示需要 item 本身是一個唯一的字符串或者數字。

當數據改變觸發渲染層重新渲染的時候，會校正帶有 key 的組件，框架會確保他們被重新排序，而不是重新創建，以確保使組件保持自身的狀態，並且提高列表渲染時的效率。