入門教程之列表渲染多層嵌套循環(huán)，目前官方的文檔里，主要是一維數(shù)組列表渲染的案例，還是比較簡單單一，給剛?cè)腴T的童鞋還是無從入手的感覺。
<view wx:for="{{items}}">
{{index}}: {{item.message}}
</view>
還有一個九九乘法表把數(shù)據(jù)直接寫到wxml里的，并不是動態(tài)二維數(shù)組的列表渲染。
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
<view wx:if="{{i <= j}}">
{{i}} * {{j}} = {{i * j}}
</view>
</view>
</view>那么今天，我們主要來講講動態(tài)多維數(shù)組和對象混合的列表渲染。
講解
何為多維數(shù)組和對象混合，給個很簡單的例子
twoList:[{
id:1,
name:'應(yīng)季鮮果',
count:1,
twodata:[{
'id':11,
'name':'雞脆骨'
},{
'id':12,
'name':'雞爪'
}]
},{
id:2,
name:'精致糕點',
count:6,
twodata:[{
'id':13,
'name':'羔羊排骨一條'
},{
'id':14,
'name':'微辣'
}]
}]上述例子就是一個數(shù)組，這都是我們?nèi)粘ｉ_發(fā)過程中，經(jīng)常會碰到的JSON格式，
該數(shù)組的元素是有對象，對象又分為屬性，屬于數(shù)組對象混合，可能對于剛接觸小程序的童鞋，碰到這種數(shù)組對象混合的就會發(fā)難了。
一層循環(huán)
oneList:[{
id:1,
name:'應(yīng)季鮮果',
count:1
},{
id:2,
name:'精致糕點',
count:6
},{
id:3,
name:'全球美食烘培原料',
count:12
},{
id:4,
name:'無辣不歡生猛海鮮',
count:5
}]以上數(shù)組對象混合JSON，是測試只有一層循環(huán)的，我們看看在 wxml 里怎么循環(huán)，我們先看一下要循環(huán)渲染到頁面上的效果圖。
<view wx:for="{{oneList}}"wx:key="id">
{{index+1}}、{{item.name}}
</view>我們可以看到，這里直接用兩個花括號來給 view 循環(huán)列表，注意強調(diào)一下，請記得一下要用 兩個花括號數(shù)據(jù)起來，如果不包起來， view 也會循環(huán)出來，但并不是自己要循環(huán)的數(shù)據(jù)，而且是給了一個假象給你以為是有循環(huán)了，這里開發(fā)工具有點坑人的感覺，這個還需要多細(xì)心點，這里記住一點，只要是有數(shù)據(jù)的，就需要花括號。
另外默認(rèn)數(shù)組的當(dāng)前項的下標(biāo)變量名默認(rèn)為index，數(shù)組當(dāng)前項的變量名默認(rèn)為item，同時我這里也順道演示了如何使用數(shù)組變量名和下標(biāo)。
二層循環(huán)
JSON代碼
twoList:[{
id:1,
name:'應(yīng)季鮮果',
count:1,
twodata:[{
'id':11,
'name':'雞脆骨'
},{
'id':12,
'name':'雞爪'
}]
},{
id:2,
name:'精致糕點',
count:6,
twodata:[{
'id':13,
'name':'羔羊排骨一條'
},{
'id':14,
'name':'微辣'
}]
},{
id:3,
name:'全球美食烘培原料',
count:12,
twodata:[{
'id':15,
'name':'秋刀魚'
},{
'id':16,
'name':'錫箔紙金針菇'
}]
}]wxml代碼
<view class="pad10"wx:for="{{twoList}}"wx:key="id">
<view>
{{index+1}}、{{item.name}}
</view>
<view wx:for="{{item.twodata}}"wx:for-item="twodata"wx:key="id">
----{{twodata.name}}---{{item.name}}
</view>
</view>以上截圖和代碼是二層嵌套內(nèi)容。
我們在wxml代碼里，很明顯的看到有兩個 wx:for 的控制屬性，在二層循環(huán)的JSON代碼里，我們看每個單數(shù)組里還有一級數(shù)據(jù) twodata ，這里是需要再循環(huán)渲染到頁面上的，在第一層數(shù)據(jù)里，直接再循環(huán) item.twodata 即可，請記得一定要帶上花括號。
在第二層的循環(huán)里，建議把當(dāng)前項的變量名改為其他，即在wxml代碼里看到的 wx:for-item="twodata" ，因為默認(rèn)的當(dāng)前項的變量名為 item ，如果不改換其他的話，你是拿不到第一層循環(huán)的數(shù)據(jù)的，因為被第二層的變量名覆蓋了。
所以我們在wxml代碼里，在第二層循環(huán)時，可以看到還可以循環(huán)第一層的值，即 ------- 。
三層以上的多層循環(huán)
三層以上的多層的數(shù)組循環(huán)，在原理上同二層循環(huán)是一樣的，能理解了二層數(shù)組循環(huán)，對于三層以及三層以上都能得心應(yīng)用的。
需要注意的地方，那就是老生常談的問題了，數(shù)據(jù)需要用花括號括起來，從第二層起，把默認(rèn)的當(dāng)前項的變量名改為其他，例如 wx:for-item="twodata" ，還有細(xì)心再細(xì)心。
wx:key唯一標(biāo)識符
為什么會有 wx:key 的出現(xiàn)呢，官方給的解釋是，如果列表中項目的位置會動態(tài)改變或者有新的項目添加到列表中，并且希望列表中的項目保持自己的特征和狀態(tài)（如 input 中的輸入內(nèi)容， switch 的選中狀態(tài)），需要使用 wx:key 來指定列表中項目的唯一的標(biāo)識符。
當(dāng)數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時候，會校正帶有 key 的組件，框架會確保他們被重新排序，而不是重新創(chuàng)建，以確保使組件保持自身的狀態(tài)，并且提高列表渲染時的效率。
在開發(fā)過程中， wx:key 的作用對于項目作用是非常大的，如果從文字上無法理解的童鞋，可以到github clone demo到微信開發(fā)工具里，親自體驗下。
我們看到這個GIF動畫圖，這里有一個 switch 的開啟狀態(tài)， switch 的狀態(tài)是在標(biāo)題為 羔羊排骨一條 的，在對這個數(shù)組增加數(shù)據(jù)時，這個 switch 的狀態(tài)并不跟隨著 羔羊排骨一條 ，并不保持自己的狀態(tài)。
那我們再看另一個例子，使用了wx:key唯一標(biāo)識符。
這個GIF動畫圖，也是點擊開啟了 switch 的狀態(tài)，唯一有不同的地方，就是在新增數(shù)據(jù)時，是保持著自己的狀態(tài)的。
相信通過這兩個小例子，對wx:key唯一標(biāo)識符應(yīng)該也有所了解啦，想要提升技術(shù)，就要多折騰，自己在小程序里，寫個 wx:for 和 wx:key 體會下。
還有一個需要注意的地方，我們先看看以下代碼
<view class="pad10"wx:for="{{twoList}}"wx:key="id">
</view>wx:key="id" ，我們看到 wx:key 里的值并不需要花括號的，是的，這里是比較特別的地方，不需要花括號，同時也不需要參數(shù)名，需要是雖然數(shù)據(jù)里的一個字段名。
結(jié)束語
今天我們講了列表渲染，官方給的文檔還是比較簡單單一，我們這里更深入的講了數(shù)組的一層、二層以及多層循環(huán)，還有wx:key唯一標(biāo)識符的使用方法和注意事項。
相信在小程序推出公測之后，很多小伙伴都已經(jīng)抓緊申請注冊小程序了。在開發(fā)階段中也碰到了很多的問題，例如wx.request數(shù)據(jù)請求不成功，在數(shù)組操作時，不知道如何往數(shù)組里push數(shù)據(jù)，input如何監(jiān)聽用戶輸入的狀態(tài)，css的background-image無法獲取本地資源等等，本博客會出一個專題，給碰到這些問題的小伙伴解決思路。
demo github地址：
github.com/bluefox1688/wxapp_study
【相關(guān)推薦】
1. 微信公眾號平臺源碼下載
Atas ialah kandungan terperinci 微信開發(fā)之列表渲染多層嵌套循環(huán). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Bagaimana untuk memaparkan pandangan atas ortogon dalam Kujiale_Tutorial pada memaparkan paparan atas ortogon dalam Kujiale
Apr 02, 2024 pm 01:10 PM
1. Mula-mula buka pelan reka bentuk yang akan diberikan dalam Kujiale. 2. Kemudian buka pemaparan paparan atas di bawah menu pemaparan. 3. Kemudian klik Ortogonal dalam tetapan parameter dalam antara muka paparan paparan atas. 4. Akhir sekali, selepas melaraskan sudut model, klik Render Now untuk memaparkan paparan atas ortogon.
Ralat Vue: v-html tidak boleh digunakan dengan betul untuk memaparkan kod HTML dinamik Bagaimana untuk menyelesaikannya?
Aug 19, 2023 pm 12:27 PM
Ralat Vue: Tidak dapat menggunakan v-html dengan betul untuk memaparkan kod HTML dinamik, bagaimana untuk menyelesaikannya? Pengenalan: Dalam pembangunan Vue, kita selalunya perlu memaparkan kod HTML secara dinamik untuk memaparkan kandungan teks kaya atau input pengguna yang dijana secara dinamik. Vue menyediakan arahan v-html untuk melaksanakan fungsi ini. Walau bagaimanapun, kadangkala kami mungkin menghadapi masalah yang tidak dapat menghasilkan kod HTML dinamik menggunakan v-html dengan betul. Artikel ini akan meneroka punca masalah ini dan memberikan penyelesaian. Penerangan masalah: Dalam Vue, apabila kami menggunakan v
Kajian perbandingan gelung dan rekursi dalam bahasa Go
Jun 01, 2023 am 09:23 AM
Nota: Artikel ini membandingkan gelung dan rekursi dari perspektif bahasa Go. Semasa menulis program, anda sering menghadapi situasi di mana satu siri data atau operasi perlu diproses berulang kali. Untuk mencapai ini kita perlu menggunakan gelung atau rekursi. Gelung dan rekursi adalah kedua-dua kaedah pemprosesan yang biasa digunakan, tetapi dalam aplikasi praktikal, mereka masing-masing mempunyai kelebihan dan kekurangan, jadi keadaan sebenar perlu dipertimbangkan apabila memilih kaedah yang hendak digunakan. Artikel ini akan menjalankan kajian perbandingan gelung dan rekursi dalam bahasa Go. 1. Gelung Gelung ialah mekanisme yang berulang kali melaksanakan sekeping kod tertentu. Terdapat tiga jenis utama bahasa Go
Ekspresi Lambda terkeluar daripada gelung
Feb 20, 2024 am 08:47 AM
Ekspresi Lambda keluar dari gelung, contoh kod khusus diperlukan Dalam pengaturcaraan, struktur gelung ialah sintaks penting yang sering digunakan. Walau bagaimanapun, dalam keadaan tertentu, kita mungkin mahu keluar daripada keseluruhan gelung apabila keadaan tertentu dipenuhi dalam badan gelung, dan bukannya menamatkan lelaran gelung semasa. Pada masa ini, ciri-ciri ungkapan lambda boleh membantu kita mencapai matlamat untuk melompat keluar dari gelung. Ungkapan Lambda ialah cara untuk mengisytiharkan fungsi tanpa nama, yang boleh mentakrifkan logik fungsi mudah secara dalaman. Ia berbeza daripada pengisytiharan fungsi biasa,
Java Iterator vs. Iterable: Satu langkah untuk menulis kod elegan
Feb 19, 2024 pm 02:54 PM
Antara muka Iterator Antara muka Iterator ialah antara muka yang digunakan untuk melintasi koleksi. Ia menyediakan beberapa kaedah, termasuk hasNext(), next() dan remove(). Kaedah hasNext() mengembalikan nilai Boolean yang menunjukkan sama ada terdapat elemen seterusnya dalam koleksi. Kaedah next() mengembalikan elemen seterusnya dalam koleksi dan mengeluarkannya daripada koleksi. Kaedah remove() mengalih keluar elemen semasa daripada koleksi. Contoh kod berikut menunjukkan cara menggunakan antara muka Iterator untuk mengulang koleksi: Listnames=Arrays.asList("John","Mary","Bob");Iterator
Kelas pilihan dalam Java 8: Bagaimana untuk menggunakan kaedah flatMap() untuk mengendalikan berbilang peringkat nilai bersarang mungkin nol
Jul 31, 2023 pm 10:33 PM
Kelas pilihan dalam Java8: Cara menggunakan kaedah flatMap() untuk mengendalikan nilai bersarang berbilang peringkat yang mungkin nol Pengenalan: Dalam pembangunan perisian, kita sering menghadapi situasi di mana kita berurusan dengan nilai yang mungkin batal. Sebelum ini, kami mungkin telah menggunakan pernyataan if-else untuk menyemak sama ada objek kosong, tetapi pendekatan ini adalah bertele-tele dan terdedah kepada ralat. Java 8 memperkenalkan kelas Pilihan, iaitu objek bekas yang boleh mengandungi nilai bukan nol pilihan. Menggunakan kelas Pilihan boleh menjadi lebih ringkas dan selamat
Ralat Vue: Tidak dapat menggunakan v-html dengan betul untuk memaparkan kod HTML, bagaimana untuk menyelesaikannya?
Aug 26, 2023 am 11:25 AM
Ralat Vue: Tidak dapat menggunakan v-html dengan betul untuk memaparkan kod HTML, bagaimana untuk menyelesaikannya? Vue ialah rangka kerja JavaScript popular yang boleh membantu kami membina antara muka pengguna interaktif. Dalam Vue, kita boleh menggunakan arahan v-html untuk menjadikan kod HTML ke dalam templat. Walau bagaimanapun, kadangkala kami mungkin menghadapi masalah: kod HTML tidak boleh dipaparkan dengan betul menggunakan v-html. Artikel ini akan menerangkan beberapa sebab dan penyelesaian biasa untuk membantu anda menyelesaikan masalah ini. Alasan pertama yang mungkin adalah bahawa
PHP mengembalikan semua nilai dalam tatasusunan untuk membentuk tatasusunan
Mar 21, 2024 am 09:06 AM
Artikel ini akan menerangkan secara terperinci bagaimana PHP mengembalikan semua nilai tatasusunan untuk membentuk tatasusunan Editor berpendapat ia agak praktikal, jadi saya berkongsi dengan anda sebagai rujukan . Menggunakan fungsi array_values() Fungsi array_values() mengembalikan tatasusunan semua nilai dalam tatasusunan. Ia tidak mengekalkan kunci tatasusunan asal. $array=["foo" =>"bar","baz" =>"qux"];$values=array_values($array);//$values ????akan menjadi ["bar","qux"]Menggunakan gelung boleh Gunakan gelung untuk mendapatkan semua nilai tatasusunan secara manual dan menambahnya kepada yang baharu
