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

最新推荐文章于 2022-08-02 00:21:12 发布
原创 最新推荐文章于 2022-08-02 00:21:12 发布 · 826 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文总结了如何在ivx中利用for组件进行循环创建，以实现排行榜功能。通过设置数据来源、处理数据库数据、循环创建组件并绑定数据，展示了如何动态展示每个玩家的头像、昵称和得分。循环创建是实现诸如排行榜、表格和消息列表等场景的重要技巧。

之前在可滑动容器那篇文章的结尾里提到了for循环创建组件，今天就正好详细说一说ivx中for容器来实现循环创建。在实际案例中我们其实是经常需要用到这个功能的，因为他可以把结构一致的组件集合复制创建多份而不是真的去一个一个制作出来，可以节省很多时间。以这个排行榜的demo举例，我们可以看出每位玩家的得分卡片结构是一致的，信息类型也都是头像图片，玩家昵称和得分这三项，只是内容不同。现在就来详细说一下这是如何实现的。

1.数据库与用户
数据库现在是已经添加好了了三个字段 分值，头像和昵称，并且也已经填入了一些数据，这是前台的对象数组排行榜的数据来源。数据库设置了将每人提交次数限制为1。用户组件则是前台初始化用于微信登录并获取我们的头像昵称和openID，取的这样一个身份后才能生成分数同时也能用于区分不同玩家。
在这里插入图片描述在这里插入图片描述
2.测试页页面
get your rank按钮的作用是跳转页面，get your score则是随机获取得分并提交到数据库。提交的结果成功了则显示得分。失败则提示用户已经提交过了并直接跳转排行榜页面。
在这里插入图片描述

最低0.47元/天 解锁文章
iVX常用开发技巧（1）—循环创建的使用
homjeong的博客
04-15 730
（一）使用场景 循环创建组件可以在应用程序运行时动态创建出具有相同对象结构和事件逻辑的UI单元模块，并通过绑定数据源的方式来控制动态UI单元的数量及属性值，常和条件容器一起筛选创建模块化的动态列表。简而言之，当界面重复使用相同的结构但此时信息却不同时，我们会使用循环创建的方式来减轻工作量。如下图的图书展示系统： 我们可以发现，不同的书本展示都用了一个相同的结构，它们都会展示书籍照片+书名+作者+出版社，但是每本书的信息不一样，这种情况下，我们就可以使用循环创建了。 （二）基本用法 UI单元.
使用ivx连接组件实现私聊模型的经验总结
VXLab的博客
04-14 726
在一些案例中我们需要实现应用之间的数据即时共享，比如聊天室或者需要互动的多人游戏等。在ivx中我们是通过连接组件实现这种多个设备之间的信息传递功能的，今天结合一个私聊模型来讲一讲连接组件的具体使用方法。 一.连接 首先简单介绍一下连接组件，我们在对象树里选中前台即可添加一个连接，可以看到它只有一个属性就是它的SID码，这也是它的唯一标识。 1.用户 登录连接的每个用户可以设置自己的用户ID、昵...
docker使用shell for循环批量创建容器和批量删除容器脚本
lxy___的博客
10-04 1621
1、批量创建容器脚本 [root@localhost ~]# cat docker_add.sh #!/bin/bash #前提在/root/add.txt中输入要创建容器的名称，名称切不相同 #例如： #[root@localhost ~]# cat add.txt #test1 #test2 #test3 name=cat /root/add.txt for num in $name do for char in numdo/usr/bin/dockerrun−idt−−name=num do
使用ivx实现列表划入效果的经验总结
VXLab的博客
03-26 804
之前有一篇帖子讲了使用轨迹实现抽屉信息框的方法，今天再讲一讲如何使用变化状态功能实现的与之类似的列表滑入功能。 1.首先在页面中添加一个按钮和一个横幅，在横幅内用三个行容器做出一个简易列表。实际案例中这里也可以使用循环创建制作列表。 2.然后是设置列表的初始位置。将横幅的宽高都置0，并且设置其整体布局属性的值为中下，这样横幅的原点坐标就是页面最下方中间的位置。由于是绝对定位的横幅，子组件的位置...
使用ivx实现页面导航的经验总结
VXLab的博客
03-26 1757
页面导航与标签导航十分类似，功能和使用方法也基本一致，区别在于页面导航更多用于移动端页面、APP功能页面之中。 1.将页面划分为两个区域，底部的行用来作为页面导航器，上面的行用于展示各个页面的内容。 2.将页面导航器的标签和图标填入对象数组作为循环创建的数据来源，for容器下是一个列容器，里面是一个文本组件和图片组件，分别绑定对象数组的标签名和图片。 3.给for容器下的列容器添加点击事件，当...
关于我用iVX沉浸式体验了一把0代码项目创建
努力才是唯一的入场券。
08-02 3874
关于我用iVX沉浸式体验了一把0代码项目创建
使用ivx实现拖拽上传文件功能的经验总结
VXLab的博客
03-31 820
在实际案例中经常会使用到上传文件的功能，不过普通的上传文件需要用户再去一层一层查找文件的路径并不是十分的方便，今天给大家讲一种使用拖拽放置容器实现上传文件的方法。 1.拖拽放置容器 拖拽放置容器位于拓展组件中的特殊功能容器类，我们可以给它添加事件拖拽放置，此事件的动作中我们能获取一个返回值——拖拽文件，在调试记录中打印出来可以看到里面包含文件的名称、大小和类型等信息。 不过拖拽放置容器只是...
使用ivx中表格组件的经验总结
VXLab的博客
03-16 1223
之前讲过了使用ivx在案例中如何使用图表组件更直观的展示数据，不过还有另一种展示数据也常用到的手段——表格。ivx中也对这一功能制作了对应的表格组件，今天就来说说这个表格组件是如何使用的。 1.表格的数据来源 表格和for循环创建一样需要有数据来源，而且多是对象数组（嗯，反正我就是喜欢对象数组）。可以看到第一行除了第一列后面几个的元素都是 “left ”（注意前后都是各两个下划线），这个是用于...
使用ivx实现多级下拉菜单联动效果的经验总结
VXLab的博客
03-24 1227
在实际案例中经常会有这样的场景，我们需要对一些信息进行选择，同时这些数据之间还有明确的层级关系，比如选择省市区或者组织部门，当前一个下拉菜单选项固定后下一层级的下拉菜单选项是要随之改变的。今天就说一说如何实现这种多级下拉菜单联动的效果。 1.下拉菜单 下拉菜单是拓展组件的一种，选中下拉菜单再点击拓展组件可以添加下拉菜单选项和下拉菜单选择组两种子组件，下拉菜单选择组内也可以添加下拉菜单选项，它主要...
使用ivx开发web全栈项目 初探（一）
xiongwn的博客
09-03 2万+
一、前言 本人是一枚喜欢探索黑科技的web前端，没事喜欢研究研究框架，了解网络技术/工具等等。最近在研究saas和paas的时候在知乎专栏有大佬提到了一款在线页面编辑系统——ivx。看到这里在做的大佬估计表示不屑，不就是在线编排h5的工具网站嘛，这种东西国内不多得是：135编辑器、秀米、易点，大同小异都是集成的富文本编辑器，允许你使用封装好的事件触发器、动画效果、自定义css样式，感觉没什么技术含...
用for循环嵌套实现排列数
让，
12-09 1133
next—permutation（）可用于字符串，二进制的比较其实就是0与1的比较，就是字符串的字典序比较 #include<iostream> #include<cstdio> #include<string> #include<algorithm> using namespace std; const int maxn=10010; i...
使用ivx实现投票功能的经验总结（拓展篇）
VXLab的博客
04-24 515
之前有讲过一个投票模型，用户登录案例可以给候选人投票或者成为候选人，而且每人只有一次投票机会，今天我们对其进行一些拓展。 使用ivx实现投票的经验总结：https://blog.youkuaiyun.com/VXLab/article/details/105492619 一.实时展示 原案例中我们是在案例初始化时将所有候选人信息拿到前台，并且只有在当前用户投票后才去将前台数据中所投候选人的票数加1，这样是无法...
八、后台与数据库（IVX 快速开发教程）
1_bit 的博客
09-09 4016
八、后台与数据库 在 iVX 中数据库作为数据存储仓库，通过数据库可以永久性存储存储数据，而后台服务起到数据传输作用，将数据库的数据传输到前台页面之中，页面再使用这些数据。 8.1.1 数据库添加 在 iVX 中点击后台即可创建数据库，操作流程如下： 创建数据库后，可以在数据库中添加字段值，该字段值创建方法与二维数组类似。首先点击数据库，在出现的数据库编辑框中点击新建字段，字段我们可以理解为“列”： 我们依次创建以下字段： 随后点击加号输入具体内容： 在数据库中，我们发现数据ID会按次序自动进行增加
iVX中数据库中的字段索引
deadlinefighter的博客
09-27 407
一、什么是数据库索引 数据库索引，类似于图书馆中的分类查询卡片，用于快速的对数据库进行查询。索引原理，简单来说，就是针对数据库中某个字段的数据，进行排序，存储在另一个专门的索引数据表中。然后在针对该字段的查询时，使用二分法快速从索引数据表中定位到相应记录的数据ID，再根据这个数据ID，从原始表中返回需要查询的记录信息。 举个例子，我们把数据库里的数据，想象成是一个图书馆里的所有的书，假设，我们现在有这些书： 注意，这些书的排列顺序，是按入库时间来的，这个也是通常数据的排列顺序，即先来的排在前面，后来
使用ivx学习开发表格布局的经验分享
VXLab的博客
03-11 1066
今天想与大家分享的ivx学习经验是关于绝对定位的使用，分析使用的依然是ivx官网的demo，绝对定位容器的使用，我认为核心在于理解绝对定位的含义，我所理解的绝对定位指的是所添加的组件在其所处的绝对定位环境中的位置，也就是坐标，是固定的，也就是这个组件位于这个绝对环境中一个固定的位置，固定它的就是它的坐标，下面我分享一下我对官网demo的分析： 1.在新版本的ivx工作台中新创的作品可以直接选择最初...
递归和循环将数据库中查询出的list进行建树
Alan的博客
04-10 1544
最近一个项目中用到了Ztree，在做全国各省、市、地区、镇等多级树勾选时，原有的框架自带写法是进行递归查询数据库实现，这种方式在树层级不多或树节点数量不多时，还算好用。但树比较大时，这种递归查询数据库的方法就比较慢，同时也应该避免这么多次的查询数据库。所以改成了先查询出所有的树节点list集合，然后进行组装tree。List转成Tree有两种方式，一种是常用的递归，一种是双层循环（我的项目中未能成...
微信小程序：wx:for循环输出的使用方法以及简单例子
热门推荐
何小杰的博客
05-31 25万+
今天来讲解下循环输出元素 ： 然后我们自己尝试构建一个for循环输出的小程序 app.js以及app.json app.wxss页面的构造就不放出来了，不会的童鞋可以看博主的第一个小程序文章 初步构造完成如下： 下面是for.js的构造： // pages/for/for.js Page({ /** * 页面的初始数据 */ data: { ...
最近5年183个Java面试问题列表及答案［最全］
weixin_34122548的博客
02-21 3289
Java 面试随着时间的改变而改变。在过去的日子里，当你知道 String 和 StringBuilder 的区别（String 类型和 StringBuffer 类型的主要性能区别其实在于 String 是不可变的对象。因此在每次对 String 类型进行改变的时候其实都等同于生成了一个新的 String 对象，然后将指针指向新的 String 对象，所以经常改变内容的字符串最好不要用 Str...
ivx怎么引用外部ui组件，比如element plus ant这些组件
最新发布
11-15
<think> 嗯，用户这次明确询问ivx引用外部UI组件（如Element Plus、Ant Design）的具体方法。虽然之前回答过ivx自定义组件的相关问题，但这次聚焦在主流前端框架的集成上，说明用户可能在开发企业级应用时需要复用现有UI库。 用户提到Element Plus和Ant Design这两个具体组件库，显然有实际开发需求。考虑到ivx作为低代码平台的特性，需要区分原生支持和变通方案：官方组件库支持是最高效的，但若未覆盖特定组件，可能需要通过自定义组件功能实现。用户能精准提问，应该具备一定开发经验。 从技术实现看，核心在于解决三个层次的问题：首先是组件封装（将Vue组件转为ivx可识别格式），其次是样式隔离（避免CSS污染），最后是事件通信（处理props和emit）。需要重点提醒用户注意ivx的沙盒环境限制，比如全局CSS可能失效的问题。 注意到用户上次追问过调试方法，这次回答特意补充了事件监听技巧。生成的相关问题也延续了技术深度，比如样式覆盖和组件封装原理，这些都是实际集成时必然遇到的痛点。 最后给出的替代方案——官方组件库和自定义CSS，是针对不同技术偏好用户的补充建议。特别是提到"设计器内操作"的细节，因为ivx的核心优势就是可视化开发，不能因为集成外部组件而放弃这个特性。 </think> 在iVX平台中引用外部UI组件库（如Element Plus、Ant Design）需通过**自定义组件功能**实现，具体步骤如下： --- ### 一、核心步骤 1. **封装外部组件** 在外部开发环境（如VSCode）中将目标组件封装为Vue单文件组件（.vue）： ```vue <template> <el-button>Element按钮</el-button> <!-- Element Plus示例 --> </template> <script> import "element-plus/dist/index.css"; // 引入样式 export default { name: "CustomButton" }; </script> ``` 2. **生成UMD格式组件** 使用构建工具（如Vite）将组件打包为UMD格式： ```javascript // vite.config.js export default { build: { lib: { entry: "./src/CustomButton.vue", name: "CustomButton", formats: ["umd"] } } }; ``` 输出文件：`dist/CustomButton.umd.js` 3. **上传至iVX** - 进入iVX编辑器 → **资源中心** → **自定义组件** - 点击「上传组件」并添加`.umd.js`文件 - 填写组件名、描述（如：`ElementPlus按钮`） 4. **引用组件** - 在组件面板的**自定义**分类中找到上传的组件 - 拖拽到画布中即可使用 --- ### 二、关键注意事项 1. **样式处理** - **推荐**：在封装组件时内联样式（避免全局污染） - **备选**：在iVX的「全局CSS」中手动添加组件库CSS文件 ```css @import url("https://unpkg.com/element-plus/dist/index.css"); ``` 2. **事件绑定** 通过iVX的**事件面板**绑定自定义事件（如按钮点击事件）： ```python # iVX动作面板示例 def 按钮点击事件处理(): 弹出提示("按钮被点击") ``` 3. **属性配置** 在封装组件时声明`props`，可在iVX属性面板动态配置： ```vue <script> export default { props: { buttonText: { type: String, default: "默认文本" } } }; </script> ``` --- ### 三、调试技巧 1. **浏览器控制台** 使用`console.log()`输出日志，在Chrome开发者工具查看 2. **实时预览** iVX编辑器的「预览模式」支持热更新调试组件 3. **错误定位** - 组件加载失败 → 检查UMD文件路径及网络请求 - 样式异常 → 审查元素确认CSS优先级 --- ### 四、替代方案（无需封装） 若仅需简单样式，可直接在iVX中使用以下方法： 1. **官方组件库** iVX内置类Element的组件（如按钮、输入框） 2. **自定义CSS类** 在「样式面板」手动编写类名实现类似效果： ```css .ivx-ant-btn { background: #1890ff; border-radius: 4px; padding: 8px 16px; } ``` --- ### 🌟 最佳实践建议 ```mermaid graph LR A[确定所需组件] --> B{是否复杂交互？} B -->|是| C[封装为Vue组件] B -->|否| D[使用iVX内置组件+CSS] C --> E[UMD打包上传] E --> F[事件/属性配置] D --> G[样式面板微调] ``` > 💡 **重要提示**：对于Ant Design等大型库，建议按需引入避免性能下降。若需高频使用多组件，推荐通过iVX的**项目模板**功能创建可复用的组件集合[^1]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值