アプレット----リストレンダリング


1 wx:for

wx:forを使用すると、指定された配列に従って、繰り返されるコンポーネント構造を循環的にレンダリングできます。

デフォルトでは、現在のループアイテムのインデックスはindexで表され、現在のループアイテムはitemで表されます。

<!--pages/list/list.wxml-->
<view wx:for="{
     
     {arr}}">
  索引:{
   
   {index}} -- 当前项:{
   
   {item}}
</view>
// pages/list/list.js
Page({
    
    
  data: {
    
    
    arr: [
      'a',
      'b',
      'c',
      'd',
      'e',
      'f',
    ]
  }
})

画像の説明を追加してください

2現在のアイテムのインデックスと変数名を手動で指定します

wx:for-indexを使用して、現在のループ項目のインデックスの変数名を指定します

wx:for-itemを使用して、現在のアイテムの変数名を指定します

<!--pages/list/list.wxml-->
<view wx:for="{
     
     {arr}}" wx:for-index="idx" wx:for-item="content">
  索引:{
   
   {idx}} -- 当前项:{
   
   {content}}
</view>

画像の説明を追加してください

3 wx:keyの使用

Vueリストレンダリングの:keyと同様に、アプレットがリストレンダリングを実装する場合、レンダリングされたリストアイテムに一意のキー値を指定することもお勧めします。これにより、レンダリングの効率が向上します。

リストレンダリングのキーは通常、一意のIDを使用します。各アイテムを一意に識別できず、配列内の要素の数と位置に応じてインデックスが変化するため、インデックスを使用することはお勧めしません(インデックスの変更)。

<!--pages/list/list.wxml-->
<view 
  wx:for="{
     
     {arr}}" 
  wx:for-index="idx" 
  wx:for-item="content"
  wx:key="id"
>
  id: {
   
   {content.id}}
  索引:{
   
   {idx}} -- 当前项:{
   
   {content.content}}
</view>
// pages/list/list.js
Page({
    
    
  data: {
    
    
    arr: [
      {
    
    id: 1, content: 'a'},
      {
    
    id: 2, content: 'b'},
      {
    
    id: 3, content: 'c'},
      {
    
    id: 4, content: 'd'},
      {
    
    id: 5, content: 'e'}
    ]
  }
})

画像の説明を追加してください

おすすめ

転載: blog.csdn.net/m0_53022813/article/details/124389717