怎樣用ivx的for組件循環(huán)創(chuàng)建實現(xiàn)排行榜功能？

今天小編就為大家?guī)硪黄薪榻B用ivx的for組件循環(huán)創(chuàng)建實現(xiàn)排行榜功能的文章。小編覺得挺實用的，為此分享給大家做個參考。一起跟隨小編過來看看吧。

在實際案例中我們其實是經(jīng)常需要用到這個功能的，因為他可以把結(jié)構(gòu)一致的組件集合復(fù)制創(chuàng)建多份而不是真的去一個一個制作出來，可以節(jié)省很多時間。以這個排行榜的demo舉例，我們可以看出每位玩家的得分卡片結(jié)構(gòu)是一致的，信息類型也都是頭像圖片，玩家昵稱和得分這三項，只是內(nèi)容不同。

2.1.數(shù)據(jù)庫與用戶
數(shù)據(jù)庫現(xiàn)在是已經(jīng)添加好了了三個字段 分值，頭像和昵稱，并且也已經(jīng)填入了一些數(shù)據(jù)，這是前臺的對象數(shù)組排行榜的數(shù)據(jù)來源。數(shù)據(jù)庫設(shè)置了將每人提交次數(shù)限制為1。用戶組件則是前臺初始化用于微信登錄并獲取我們的頭像昵稱和openID，取的這樣一個身份后才能生成分數(shù)同時也能用于區(qū)分不同玩家。

3.2.測試頁頁面
get your rank按鈕的作用是跳轉(zhuǎn)頁面，get your score則是隨機獲取得分并提交到數(shù)據(jù)庫。提交的結(jié)果成功了則顯示得分。失敗則提示用戶已經(jīng)提交過了并直接跳轉(zhuǎn)排行榜頁面。

4.3.排行榜頁面
簡單看一下布局，頁面分為兩部分，上面是一個文本組件作為標題，下面是一個列容器，就是在這個列容器中我們添加了for循環(huán)創(chuàng)建，而循環(huán)創(chuàng)建的內(nèi)容就是這個絕對定位容器和他里面分別展示頭像昵稱分值的兩個文本組件，一個圖片組件。

5.4.for循環(huán)創(chuàng)建的數(shù)據(jù)來源
for容器只有一個屬性，數(shù)據(jù)來源。數(shù)據(jù)來源可以是二維數(shù)組，對象數(shù)組或者通用變量。Demo中數(shù)據(jù)來源是排行榜這個對象數(shù)組的值。再將數(shù)據(jù)庫的結(jié)構(gòu)導(dǎo)入了對象數(shù)組，就會看見對象數(shù)組也有了一個一個類似數(shù)據(jù)庫一樣的字段。

我們一共在demo兩個地方調(diào)用了這個獲取排行榜數(shù)據(jù)服務(wù)，都是為了把數(shù)據(jù)庫中的數(shù)據(jù)拿到前臺的對象數(shù)組（pageNum是一個分頁變量為了分批次拿取數(shù)據(jù)，這個以后有機會可以再詳細說一下。）

6.5.循環(huán)創(chuàng)建
終于到了最后一步循環(huán)創(chuàng)建，現(xiàn)在要做的就是把對象數(shù)組中的數(shù)據(jù)賦值給絕對定位容器內(nèi)的組件，使之展示的時候每個創(chuàng)建出來的絕對定位容器都展示不同玩家的頭像昵稱和分值。
前面說過for循環(huán)創(chuàng)建的數(shù)據(jù)來源是對象數(shù)組，而對象數(shù)組有多少行數(shù)據(jù)，自然for循環(huán)創(chuàng)建就會創(chuàng)建出多少個for容器下的內(nèi)容（此demo中就是絕對定位容器）。以顯示昵稱的文本組件為例。假設(shè)要對文本組件的內(nèi)容進行數(shù)據(jù)綁定，則點擊下拉菜單可以看見兩條特殊的選項當前數(shù)據(jù)1，當前序號1，這是在for循環(huán)創(chuàng)建里面才會出現(xiàn)的。

先說一下那個1吧，現(xiàn)在是只添加了一個for容器，所以只有序號1，但是可以在for容器里面再添加for容器，形成多層循環(huán)。這時，由外向內(nèi)數(shù)第一層的循環(huán)就是當前數(shù)據(jù)1，當前序號1，第二層的就是當前數(shù)據(jù)2，當前序號2。當然，你還可以一層套一層再套一層，甚至一層套一層再套一層再再套一層，反正只要記得給每個for容器綁定數(shù)據(jù)來源并且自己理得清案例邏輯即可。


然后是當前序號，這個很好理解，對象數(shù)組中的每一行數(shù)據(jù)對應(yīng)一個for容器下的內(nèi)容。則在創(chuàng)建第一行數(shù)據(jù)對應(yīng)的絕對定位容器時，當前序號就是0（對象數(shù)組的行號和for容器的序號都是從0開始的），以此類推，而當前數(shù)據(jù)自然就是對象數(shù)組中的第一行數(shù)據(jù)了，包含分值頭像和昵稱。所以我們分別把三個值賦給三個組件。分數(shù)那個文本組件填寫的是當前數(shù)據(jù)1.分數(shù)+’分’，是一種拼接字符串的寫法，用英文引號把要添加的手動輸入的字符串引起來，各部分用加號連接。

看完上述內(nèi)容，你們掌握用ivx的for組件循環(huán)創(chuàng)建實現(xiàn)排行榜功能的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！