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'}
]
}
})