循环

s-for

通过循环渲染列表是常见的场景,在元素上作用 s-for 指令,我们可以渲染一个列表。

默认情况

默认不写情况下,下标索引是为 index,数组当前变量名默认为 item。

代码示例

  • SWAN
  • JS
  1. <!-- for-demo.swan-->
  2. <view>
  3. <view s-for="persons">
  4. {{index}}: {{item.name}}
  5. </view>
  6. </view>
  1. // for-demo.js
  2. Page({
  3. data: {
  4. persons: [
  5. {name: 'Curry'},
  6. {name: 'Thompson'},
  7. {name: 'Durant'},
  8. {name: 'Green'},
  9. {name: 'Cousins'}
  10. ]
  11. }
  12. });

简写

通过简写的方式,指定下标索引和数组当前变量名。

代码示例

  • SWAN
  1. <!-- for-demo.swan-->
  2. <view>
  3. <view s-for="p,index in persons">
  4. {{index}}: {{p.name}}
  5. </view>
  6. </view>

也可以通过使用 s-for-index 来指定下标索引,s-for-item 来指定数组当前变量名。

  • SWAN
  1. <!-- for-demo.swan-->
  2. <view>
  3. <view s-for="persons" s-for-index="idx" s-for-item="p">
  4. {{idx}}: {{p.name}}
  5. </view>
  6. </view>

trackBy

如果列表中的项目会动态地增加、删除,并且希望列表中的项目保持自己的特征和状态(例如 input 中的输入内容),需要在 s-for 指令声明中指定 trackBy。

trackBy 后跟的值可以是 s-for 的 array 中 item 本身或者其属性(如 item.id),该值需要是列表中唯一的字符串或数字,且不能动态改变。

当数据更新触发重新渲染时,将自动跟踪项的变更,原先列表内的项位置会移动,新添加的项会被渲染,以确保组件保持自身的状态,并且省去一部分重新渲染带来的消耗。

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

  • SWAN
  • JS
  1. <input s-for="list trackBy item" placeholder="请输入内容" />
  2. <button bindtap="delete">删除首项</button>
  1. Page({
  2. data: {
  3. list: [1, 2, 3, 4]
  4. },
  5. delete() {
  6. const list = this.data.list
  7. console.log('当前删除项目 id', list.splice(0, 1)[0])
  8. this.setData({list})
  9. }
  10. })

Tips

当循环渲染自定义组件列表时,不指定 trackBy 而动态增删数组中的元素,可能会导致调用错误的 attached detached 生命周期函数。