支付寶小程序框架 AXML·列表渲染

a:for

在組件上使用 a:for 屬性可以綁定一個數(shù)組，即可使用數(shù)組中各項的數(shù)據(jù)重復(fù)渲染該組件。

數(shù)組當(dāng)前項的下標(biāo)變量名默認(rèn)為 index，數(shù)組當(dāng)前項的變量名默認(rèn)為 item。

<view a:for="{{array}}">
  {{index}}: {{item.message}}
</view>
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar',
    }],
  },
});

使用 a:for-item 可以指定數(shù)組當(dāng)前元素的變量名。使用 a:for-index 可以指定數(shù)組當(dāng)前下標(biāo)的變量名。

<view a:for="{{array}}" a:for-index="idx" a:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

a:for 支持嵌套。 以下是九九乘法表的嵌套示例代碼。

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

block a:for

與 block a:if 類似，可以將 a:for 用在 <block/> 標(biāo)簽上，以渲染一個包含多節(jié)點的結(jié)構(gòu)塊。

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

a:key

如果列表項位置會動態(tài)改變或者有新項目添加到列表中，同時希望列表項保持特征和狀態(tài)（比如 <input/> 中的輸入內(nèi)容，<switch/> 的選中狀態(tài)），需要使用 a:key 來指定列表項的唯一標(biāo)識。

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

• 字符串：代表列表項某個屬性，屬性值需要是列表中唯一的字符串或數(shù)字，比如 ID，并且不能動態(tài)改變。
• 保留關(guān)鍵字 *this，代表列表項本身，并且它是唯一的字符串或者數(shù)字，比如當(dāng)數(shù)據(jù)改變觸發(fā)重新渲染時，會校正帶有 key 的組件，框架會確保他們重新被排序，而不是重新創(chuàng)建，這可以使組件保持自身狀態(tài)，提高列表渲染效率。

注意：

• 如不提供 a:key，會報一個 warning。
• 如果明確知道列表是靜態(tài)，或者不用關(guān)注其順序，則可以忽略。

下面是示例代碼：

<view class="container">
  <view a:for="{{list}}" a:key="*this">
    <view onTap="bringToFront" data-value="{{item}}">
    {{item}}: click to bring to front
    </view>
  </view>
</view>
Page({
  data:{
    list:['1', '2', '3', '4'],
  },
  bringToFront(e) {
    const { value } = e.target.dataset;
    const list = this.data.list.concat();
    const index = list.indexOf(value);
    if (index !== -1) {
      list.splice(index, 1);
      list.unshift(value);
      this.setData({ list });
    }
  },
});

key

key 是比 a:key 更通用的寫法，里面可以填充任意表達式和字符串。

注意: key 不能設(shè)置在 block 上。

下面是示例代碼：

<view class="container">
  <view a:for="{{list}}" key="{{item}}">
    <view onTap="bringToFront" data-value="{{item}}">
    {{item}}: click to bring to front
    </view>
  </view>
</view>

Page({
  data:{
    list:['1', '2', '3', '4'],
  },
  bringToFront(e) {
    const { value } = e.target.dataset;
    const list = this.data.list.concat();
    const index = list.indexOf(value);
    if (index !== -1) {
      list.splice(index, 1);
      list.unshift(value);
      this.setData({ list });
    }
  },
});