TTML-列表渲染

我们经常需要渲染列表,这个时候我们可以使用 tt:for;

默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item;

<!-- index.ttml -->
<view tt:for="{{array}}">
  {{index}}: {{item.message}}
</view>
// index.js
Page({
  data: {
    array: [
      {
        message: "foo"
      },
      {
        message: "bar"
      }
    ]
  }
});

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

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

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


block tt:for

可以将 tt:for 用在<block/>标签上,以渲染一个包含多节点的结构块。例如:

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


tt:key

当列表内容变化时,某些元素会被重新渲染而失去之前的 UI 状态,如果希望前后保持相同的状态,可以使用tt:key来指定列表中项目的唯一标识,这个可以类比 React 或者 Vue 中列表渲染的 key。

tt:key 如何指定:

  • 字符串,代表 item 的某个字段,比如tt:key="unique",那么指定 item 的 unique 字段为 key
  • *this,代表 item 本身,比如tt:key="*this",那么就是用 item 本身(字符串)作为 key
⚠️ 注意不要通过数据绑定的方式指定 key,比如tt:key="{ { unique } }",这样会把花括号也认为是字段名的一部分,从而访问item['{ { unique } }']
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部