• 循環(huán)
  • s-for
    • 默認(rèn)情況
    • 簡寫
  • trackBy

循環(huán)

s-for

通過循環(huán)渲染列表是常見的場景，在元素上作用 s-for 指令，我們可以渲染一個列表。

創(chuàng)新互聯(lián)建站是一家專業(yè)提供衡山企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、HTML5建站、小程序制作等業(yè)務(wù)。10年已為衡山眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計公司優(yōu)惠進(jìn)行中。

默認(rèn)情況

默認(rèn)不寫情況下，下標(biāo)索引是為 index，數(shù)組當(dāng)前變量名默認(rèn)為 item。

代碼示例

• SWAN
• JS

 
 
 

  
  
  

  
  
  

  
  
  
 
  
  
  
 {{index}}: {{item.name}}
  
  
  
 
  
  
  

 
 
 

 
 
 

  
  
  
// for-demo.js
  
  
  
Page({
  
  
  
 data: {
  
  
  
 persons: [
  
  
  
 {name: 'Curry'},
  
  
  
 {name: 'Thompson'},
  
  
  
 {name: 'Durant'},
  
  
  
 {name: 'Green'},
  
  
  
 {name: 'Cousins'}
  
  
  
 ]
  
  
  
 }
  
  
  
});
 
 
 

簡寫

通過簡寫的方式，指定下標(biāo)索引和數(shù)組當(dāng)前變量名。

代碼示例

• SWAN

 
 
 

  
  
  

  
  
  

  
  
  
 
  
  
  
 {{index}}: {{p.name}}
  
  
  
 
  
  
  

 
 
 

也可以通過使用 s-for-index 來指定下標(biāo)索引，s-for-item 來指定數(shù)組當(dāng)前變量名。

• SWAN

 
 
 

  
  
  

  
  
  

  
  
  
 
  
  
  
 {{idx}}: {{p.name}}
  
  
  
 
  
  
  

 
 
 

trackBy

如果列表中的項目會動態(tài)地增加、刪除，并且希望列表中的項目保持自己的特征和狀態(tài)（例如 input 中的輸入內(nèi)容），需要在 s-for 指令聲明中指定 trackBy。

trackBy 后跟的值可以是 s-for 的 array 中 item 本身或者其屬性（如 item.id），該值需要是列表中唯一的字符串或數(shù)字，且不能動態(tài)改變。

當(dāng)數(shù)據(jù)更新觸發(fā)重新渲染時，將自動跟蹤項的變更，原先列表內(nèi)的項位置會移動，新添加的項會被渲染，以確保組件保持自身的狀態(tài)，并且省去一部分重新渲染帶來的消耗。

代碼示例

在開發(fā)者工具中打開

在開發(fā)者工具中打開

在 WEB IDE 中打開

• SWAN
• JS

 
 
 

  
  
  

  
  
  
刪除首項
 
 
 

 
 
 

  
  
  
Page({
  
  
  
 data: {
  
  
  
 list: [1, 2, 3, 4]
  
  
  
 },
  
  
  
 delete() {
  
  
  
 const list = this.data.list
  
  
  
 console.log('當(dāng)前刪除項目 id', list.splice(0, 1)[0])
  
  
  
 this.setData({list})
  
  
  
 }
  
  
  
})
 
 
 

Tips：

當(dāng)循環(huán)渲染自定義組件列表時，不指定 trackBy 而動態(tài)增刪數(shù)組中的元素，可能會導(dǎo)致調(diào)用錯誤的 attached detached 生命周期函數(shù)。

當(dāng)前文章：創(chuàng)新互聯(lián)百度小程序教程：循環(huán)
當(dāng)前網(wǎng)址：http://www.5511xx.com/article/dheoidj.html