怎樣用ivx的for組件循環創建實現排行榜功能？

今天小編就為大家帶來一篇有介紹用ivx的for組件循環創建實現排行榜功能的文章。小編覺得挺實用的，為此分享給大家做個參考。一起跟隨小編過來看看吧。

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

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

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

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

5.4.for循環創建的數據來源
for容器只有一個屬性，數據來源。數據來源可以是二維數組，對象數組或者通用變量。Demo中數據來源是排行榜這個對象數組的值。再將數據庫的結構導入了對象數組，就會看見對象數組也有了一個一個類似數據庫一樣的字段。

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

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

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


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

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