快應(yīng)用 列表渲染

列表渲染

在快應(yīng)用如果要實(shí)現(xiàn)列表渲染，我們會(huì)用到 for 指令。 for 指令用于循環(huán)輸出一個(gè)數(shù)組類(lèi)型的數(shù)據(jù)。

for指令根據(jù)源數(shù)據(jù)數(shù)組渲染列表，支持的寫(xiě)法如下（其中{{}}可以省略）：

• for="{{list}}"：list為源數(shù)據(jù)數(shù)組，默認(rèn)的數(shù)組元素名為$item
• for="{{value in list}}"：value為自定義的數(shù)組元素名，默認(rèn)的數(shù)組元素索引名為$idx
• for="{{(index, value) in list}}"：index為自定義的數(shù)組元素索引名，value為自定義的數(shù)組元素名

for指令的tid屬性用于指定數(shù)組元素的唯一 Id，若未指定，默認(rèn)使用數(shù)組索引($idx)作為唯一 Id。tid屬性的作用在于元素節(jié)點(diǎn)重用，優(yōu)化 for 循環(huán)的重繪效率

示例如下：

<template>
  <div class="tutorial-page">
    <!-- 方式1：默認(rèn)$item代表數(shù)組中的元素, $idx代表數(shù)組中的索引 -->
    <div class="tutorial-row" for="{{list}}" tid="uniqueId">
      <text>{{$idx}}.{{$item.name}}</text>
    </div>
    <!-- 方式2：自定義元素變量名稱(chēng) -->
    <div class="tutorial-row" for="value in list" tid="uniqueId">
      <text>{{$idx}}.{{value.name}}</text>
    </div>
    <!-- 方式3：自定義元素、索引的變量名稱(chēng) -->
    <div class="tutorial-row" for="(personIndex, personItem) in list" tid="uniqueId">
      <text>{{personIndex}}.{{personItem.name}}</text>
    </div>
  </div>
</template>

<style lang="less">
  .tutorial-page {
    flex-direction: column;
    .tutorial-row {
      width: 85%;
      margin-top: 10px;
      margin-bottom: 10px;
    }
  }
</style>

<script>
  export default {
    private: {
      list: [
        { name: 'aa', uniqueId: 1},
        { name: 'bb', uniqueId: 2},
        { name: 'cc', uniqueId: 3}
      ]
    },
    onInit () {
      this.$page.setTitleBar({ text: '指令for' })
    }
  }
</script>

示例代碼中，在渲染頁(yè)面時(shí)，div.tutorial-row的結(jié)構(gòu)，會(huì)根據(jù) script 中的數(shù)據(jù) list 的定義，被循環(huán)的生成多個(gè)。tid="uniqueId"，數(shù)組元素的某個(gè)屬性名，不一定叫 uniqueId。 它類(lèi)似于 React 的 key={item.uniqueId}或 vue 的 track-by={ uniqueId }, 用于優(yōu)化渲染速度。當(dāng)數(shù)據(jù)修改時(shí)，數(shù)據(jù)不改變的 dom 不會(huì)被重新渲染，已經(jīng)改變的數(shù)據(jù)所在的 dom 才會(huì)被重新渲染， 因此我們必須保證 uniqueId 這個(gè)屬性值在每個(gè)數(shù)組元素都不一樣。

注意：

for 指令只能循環(huán)數(shù)組，不能循環(huán)對(duì)象 for 指令在 block 標(biāo)簽的行為與它在其他標(biāo)簽的行為并一樣，block 標(biāo)簽里會(huì)復(fù)制它的 innerHTML，而在其他標(biāo)簽則是復(fù)制其本身。 當(dāng) for 指令與 if 指令共存于一個(gè)標(biāo)簽時(shí)， if 指令的優(yōu)先級(jí)優(yōu)于 for 指令。為了方便未看文檔的新人快速上手項(xiàng)目，不建議這兩個(gè)指令共存于同一個(gè)標(biāo)簽。 自定義變量表示 for 指令的數(shù)組索引和數(shù)組元素時(shí)，變量名不可以用$或_開(kāi)頭； 使用tid屬性時(shí)應(yīng)注意：

• tid屬性指定的數(shù)據(jù)屬性必須存在，否則可能導(dǎo)致運(yùn)行異常
• tid屬性指定的數(shù)據(jù)屬性要保證唯一，否則可能導(dǎo)致性能問(wèn)題
• tid屬性目前不支持表達(dá)式。