Paparan senarai pengenalan contoh applet WeChat

Artikel ini membawakan anda pengetahuan yang berkaitan tentang Program Mini WeChat, yang terutamanya memperkenalkan kandungan yang berkaitan tentang pemaparan senarai Mari kita lihat bersama-sama.

[Cadangan pembelajaran berkaitan: Tutorial Pembelajaran Program Mini]

wx:for

Melalui wx:for Anda boleh gelung untuk membuat struktur komponen berulang berdasarkan tatasusunan yang ditentukan Contoh sintaks adalah seperti berikut:

<view> 
    索引是：{{index}} 当前项是：{{item}}
</view>

Secara lalai, indeks item gelung semasa diwakili oleh indeks diwakili oleh penggodam item.wxml Tentukan gelung for untuk mengakses tatasusunan

<view> 
    索引是：{{index}} 当前项是：{{item}}
</view>

penggodam.js Tentukan tatasusunan

Page({    data:{        arr1:['a','b','c']
    }
})

Hasilnya adalah seperti berikut:

Tentukan secara manual indeks dan nama pembolehubah item semasa

Gunakan wx:for -index boleh menentukan nama pembolehubah indeks item gelung semasa Gunakan wx:for-item untuk menentukan nama pembolehubah item semasa Kod sampel adalah seperti berikut:

<view>
    索引是：{{idx}}  当前项是：{{itemName}}
</view>

hacker.wxml

<view>
    索引是：{{idx}}  当前项是：{{itemName}}
</view>

hacker.js

Page({    data:{        arr1:['a','b','c']
    }
})

Hasil yang dijalankan adalah seperti berikut:

Penggunaan wx:key

adalah serupa dengan :key dalam pemaparan senarai Vue Apabila applet melaksanakan pemaparan senarai, ia juga disyorkan untuk menentukan nilai kunci unik untuk item senarai yang diberikan. , dengan itu meningkatkan kecekapan pemaparan Contoh Kod adalah seperti berikut: hacker.wxml

<view>{{item.name}}</view>

hacker.js

Page({    data:{        userList:[
            {id: 1,name: 'hacker'},
            {id: 2,name: 'meng'},
            {id: 3,name: 'yuan'}
        ]
    }
})

Hasil yang dijalankan adalah seperti berikut: [Berkaitan cadangan pembelajaran: Tutorial Pembelajaran Program Mini]

Atas ialah kandungan terperinci Paparan senarai pengenalan contoh applet WeChat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!