使用ivx的for组件进行循环创建实现排行榜的经验总结

Posted 2020-11-26

之前在可滑动容器那篇文章的结尾里提到了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.分数+’分’，是一种拼接字符串的写法，用英文引号把要添加的手动输入的字符串引起来，各部分用加号连接。

7.6.总结
至此，就已经使用循环创建实现了排行榜的功能，循环创建作为一种基础功能用途十分广泛，另外比如表格，消息列表等，能够熟练的使用循环创建无疑是非常必要的。而且配合if容器进行筛选可以实现更多的效果，此外，在这个demo中除了循环创建也用到了大量其他组件的内容，看来只有广泛积累，综合运用才能写好自己的案例。