摘要:前言入門教程之列表渲染多層嵌套循環,目前官方的文檔里,主要是一維數組列表渲染的案例,還是比較簡單單一,給剛入門的童鞋還是無從入手的感覺。我們也會不定期發布一些微信小程序的學習教程。需要入群的小伙伴,請加我的個人微信。
前言
入門教程之列表渲染多層嵌套循環,目前官方的文檔里,主要是一維數組列表渲染的案例,還是比較簡單單一,給剛入門的童鞋還是無從入手的感覺。
{{index}}: {{item.message}}
還有一個九九乘法表把數據直接寫到wxml里的,并不是動態二維數組的列表渲染。
{{i}} * {{j}} = {{i * j}}
那么今天,我們主要來講講動態多維數組和對象混合的列表渲染。
講解何為多維數組和對象混合,給個很簡單的例子
twoList:[{ id:1, name:"應季鮮果", count:1, twodata:[{ "id":11, "name":"雞脆骨" },{ "id":12, "name":"雞爪" }] },{ id:2, name:"精致糕點", count:6, twodata:[{ "id":13, "name":"羔羊排骨一條" },{ "id":14, "name":"微辣" }] }]
上述例子就是一個數組,這都是我們日常開發過程中,經常會碰到的JSON格式,
該數組的元素是有對象,對象又分為屬性,屬于數組對象混合,可能對于剛接觸小程序的童鞋,碰到這種數組對象混合的就會發難了。
oneList:[{ id:1, name:"應季鮮果", count:1 },{ id:2, name:"精致糕點", count:6 },{ id:3, name:"全球美食烘培原料", count:12 },{ id:4, name:"無辣不歡生猛海鮮", count:5 }]
以上數組對象混合JSON,是測試只有一層循環的,我們看看在wxml里怎么循環,我們先看一下要循環渲染到頁面上的效果圖。
{{index+1}}、{{item.name}}
我們可以看到,這里直接用兩個花括號來給view 循環列表,注意強調一下,請記得一下要用 兩個花括號數據起來,如果不包起來,view也會循環出來,但并不是自己要循環的數據,而且是給了一個假象給你以為是有循環了,這里開發工具有點坑人的感覺,這個還需要多細心點,這里記住一點,只要是有數據的,就需要花括號。
另外默認數組的當前項的下標變量名默認為index,數組當前項的變量名默認為item,同時我這里也順道演示了如何使用數組變量名和下標。
JSON代碼
twoList:[{ id:1, name:"應季鮮果", 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代碼
{{index+1}}、{{item.name}} ----{{twodata.name}}---{{item.name}}
以上截圖和代碼是二層嵌套內容。
我們在wxml代碼里,很明顯的看到有兩個wx:for的控制屬性,在二層循環的JSON代碼里,我們看每個單數組里還有一級數據twodata,這里是需要再循環渲染到頁面上的,在第一層數據里,直接再循環item.twodata即可,請記得一定要帶上花括號。
在第二層的循環里,建議把當前項的變量名改為其他,即在wxml代碼里看到的 wx:for-item="twodata",因為默認的當前項的變量名為item,如果不改換其他的話,你是拿不到第一層循環的數據的,因為被第二層的變量名覆蓋了。
所以我們在wxml代碼里,在第二層循環時,可以看到還可以循環第一層的值,即----{{twodata.name}}---{{item.name}}。
三層以上的多層的數組循環,在原理上同二層循環是一樣的,能理解了二層數組循環,對于三層以及三層以上都能得心應用的。
需要注意的地方,那就是老生常談的問題了,數據需要用花括號括起來,從第二層起,把默認的當前項的變量名改為其他,例如 wx:for-item="twodata",還有細心再細心。
為什么會有wx:key的出現呢,官方給的解釋是,如果列表中項目的位置會動態改變或者有新的項目添加到列表中,并且希望列表中的項目保持自己的特征和狀態(如 input 中的輸入內容,switch 的選中狀態),需要使用 wx:key 來指定列表中項目的唯一的標識符。
當數據改變觸發渲染層重新渲染的時候,會校正帶有 key 的組件,框架會確保他們被重新排序,而不是重新創建,以確保使組件保持自身的狀態,并且提高列表渲染時的效率。
在開發過程中,wx:key的作用對于項目作用是非常大的,如果從文字上無法理解的童鞋,可以到github clone demo到微信開發工具里,親自體驗下。
我們看到這個GIF動畫圖,這里有一個switch的開啟狀態,switch的狀態是在標題為羔羊排骨一條的,在對這個數組增加數據時,這個switch的狀態并不跟隨著羔羊排骨一條,并不保持自己的狀態。
那我們再看另一個例子,使用了wx:key唯一標識符。
這個GIF動畫圖,也是點擊開啟了switch的狀態,唯一有不同的地方,就是在新增數據時,是保持著自己的狀態的。
相信通過這兩個小例子,對wx:key唯一標識符應該也有所了解啦,想要提升技術,就要多折騰,自己在小程序里,寫個wx:for 和 wx:key 體會下。
還有一個需要注意的地方,我們先看看以下代碼
wx:key="id",我們看到wx:key里的值并不需要花括號的,是的,這里是比較特別的地方,不需要花括號,同時也不需要參數名,需要是雖然數據里的一個字段名。
結束語今天我們講了列表渲染,官方給的文檔還是比較簡單單一,我們這里更深入的講了數組的一層、二層以及多層循環,還有wx:key唯一標識符的使用方法和注意事項。
相信在小程序推出公測之后,很多小伙伴都已經抓緊申請注冊小程序了。在開發階段中也碰到了很多的問題,例如wx.request數據請求不成功,在數組操作時,不知道如何往數組里push數據,input如何監聽用戶輸入的狀態,css的background-image無法獲取本地資源等等,本博客會出一個專題,給碰到這些問題的小伙伴解決思路。
demo github地址:
https://github.com/bluefox168...
最近大家對微信小程序開發熱情大漲,結識了不少對微信小程序技術開發的牛人,也有一些剛入行的新手,特此我建立了一個微信小程序技術交流圈子,希望給大伙有一個純潔的技術交流圈子,技術交流,提升自我。我們也會不定期發布一些微信小程序的學習教程。
此群的目標為純(干)純(貨)的技術交流群,不死于廣告之中,已開啟了群主邀請確認機制。
需要入群的小伙伴,請加我的個人微信amwhuang。(備注:小程序入群)
文章首發地址:
列表渲染多層嵌套循環及wx:key的使用--微信小程序入門教程
http://lanchenglv.com/article...
如需轉載,請標明轉載出處,謝謝。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/81068.html
摘要:前言入門教程之列表渲染多層嵌套循環,目前官方的文檔里,主要是一維數組列表渲染的案例,還是比較簡單單一,給剛入門的童鞋還是無從入手的感覺。我們也會不定期發布一些微信小程序的學習教程。需要入群的小伙伴,請加我的個人微信。 前言 入門教程之列表渲染多層嵌套循環,目前官方的文檔里,主要是一維數組列表渲染的案例,還是比較簡單單一,給剛入門的童鞋還是無從入手的感覺。 {{index}}: {...
摘要:起因意圖是想實現類似于安卓那樣的效果,想到了用微信小程序的組件,但如果每個里都只用一個來渲染數據的話實在是太慢了,就想到多層嵌套數據渲染來提高效率。 起因:意圖是想實現類似于安卓viewpager那樣的效果,想到了用微信小程序的swiper組件,但如果每個swiper-item里都只用一個wx:for來渲染數據的話實在是太慢了,就想到多層嵌套數據渲染來提高效率。 直接上代碼 wxml:...
摘要:起因意圖是想實現類似于安卓那樣的效果,想到了用微信小程序的組件,但如果每個里都只用一個來渲染數據的話實在是太慢了,就想到多層嵌套數據渲染來提高效率。 起因:意圖是想實現類似于安卓viewpager那樣的效果,想到了用微信小程序的swiper組件,但如果每個swiper-item里都只用一個wx:for來渲染數據的話實在是太慢了,就想到多層嵌套數據渲染來提高效率。 直接上代碼 wxml:...
閱讀 2849·2021-08-20 09:37
閱讀 1607·2019-08-30 12:47
閱讀 1090·2019-08-29 13:27
閱讀 1685·2019-08-28 18:02
閱讀 749·2019-08-23 18:15
閱讀 3084·2019-08-23 16:51
閱讀 931·2019-08-23 14:13
閱讀 2125·2019-08-23 13:05