使用ivx的可滑动容器制作消息列表的一些经验总结

最新推荐文章于 2023-04-27 10:41:22 发布
原创 最新推荐文章于 2023-04-27 10:41:22 发布 · 782 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何使用ivx的可滑动容器组件制作消息列表，包括添加可滑动容器、设置可滑动行和按钮组，以及配合for容器实现列表循环。通过掌握可滑动容器的使用，可以简化UI设计，提高效率。

最近在学习ivx的过程中，发现在拓展组件中有一个可滑动容器组件。在制作一些案例的消息列表时，是经常需要使用这种展示效果的，例如消息列表左滑即可选择删除或者置顶等经常使用的功能，而平常按钮又是隐藏起来的，不会挤占UI的展示区域非常便捷。ivx中将这个功能单独封装成一个功能组件，这里为ivx模块细分工作点个赞！这里也把我对这个功能模块的使用心得写下来 希望能对大家有所帮助。

1.添加可滑动容器
在下图位置中可以找到可滑动容器，添加之后可以先看一下可滑动容器的结构，对象树中除了会出现一个可滑动容器，它的下面还会出现一个可滑动按钮组和一个可滑动行。此时选中可滑动容器再去点击拓展组件，只能添加可滑动按钮组，而且鼠标右键可滑动按钮组和可滑动行你会发现，可滑动按钮组是可以删除的，而可滑动行是不行的，毕竟它是整个可滑动容器的主要展示部分。
在这里插入图片描述在这里插入图片描述
2.展示部分的主体-可滑动行
在ivx这个demo里面，是选中可滑动行添加了一个行容器，行容器中又添加三个列容器，分别展示头像，昵称消息内容和消息日期。可滑动行名字中是带着行的，而且也确实可以把它当成一个行组件看待。在内部添加组件是横向排列的，不过并不能像行组件一样设置换行以及剪切，而且他的宽高也是由父容器可滑动容器的宽高决定的。

3.滑动后展示的区域-可滑动按钮组
可滑动按钮组也是采用行排列

最低0.47元/天 解锁文章
使用ivx实现文本纵向和横向滚动效果的经验总结
VXLab的博客
04-13 1719
在案例中，为了使展示效果更佳，我们通常可以给文本加上一个纵向或者横向的滚动效果，其基本原理就是将文本信息放入一个数组循环创建，通过触发器不断调整它们的坐标，每当第一个元素内容滚动出界面就将其调整至一维数组的末尾，下面就来讲一讲具体步骤吧。 一.纵向滚动 1.界面 首先搭建一个如下图所示的简易界面，在绝对定位容器内进行循环创建，数据来源为一个一维数组，点击add按钮可以将输入框的内容添加到一维数组的...
2021年了，iVX接下来要做一些什么？开发计划
VXLab的博客
01-20 871
2021年了，iVX接下来要做一些什么？开发计划 网址：https://www.ivx.cn 产品介绍视频：www.ivx.cn/videocenter 一、iVX的核心IDE功能上的进一步完善 IDE整体：管理功能IDE化，所有管理和开发过程最好都在IDE可以完成 （一）前端部分： 前端调试工具； 滑动验证等综合用户登陆验证的支持； 更快速导入自定义组件，通过现有组件库和相关文档的方式导入；（非代码形式） 对钉钉系统更好支持； 工具组件多平台支持重构； 6、支持AI相关接口形成组件； 7、支持区块链形成
使用ivx开发web全栈项目 初探（一）
xiongwn的博客
09-03 2万+
一、前言 本人是一枚喜欢探索黑科技的web前端，没事喜欢研究研究框架，了解网络技术/工具等等。最近在研究saas和paas的时候在知乎专栏有大佬提到了一款在线页面编辑系统——ivx。看到这里在做的大佬估计表示不屑，不就是在线编排h5的工具网站嘛，这种东西国内不多得是：135编辑器、秀米、易点，大同小异都是集成的富文本编辑器，允许你使用封装好的事件触发器、动画效果、自定义css样式，感觉没什么技术含...
iVX零代码开发零基础学习《二》iVX如何创建页面(页面元素、按钮操作、对象容器、横幅、导航菜单、事件添加)
邵群超的博客
08-03 2178
iVX零代码开发零基础学习《二》一级目录二级目录三级目录 一级目录 二级目录 三级目录
使用ivx画布的遮罩效果实现滑动解锁的经验总结
VXLab的博客
03-27 857
在案例中的注册、重置密码和修改信息等部分，为了确保操作对象是用户而不是机器盗刷，我们常用到验证码。今天我们就结合画布中的遮罩功能来实现一种常用的拼图滑块解锁式验证码。 1.遮罩 遮罩是画布下才能使用的一种功能，作用是让两个组件，一个负责提供形状一个负责提供图案，比如demo中这两张图片，拼图（彩）是一张拼图形状的白色图片，背景（动）是一张背景彩图。 将拼图（彩）移动到背景（动）的上面，并将背景...
使用ivx实现通过角标调整图片的经验总结
VXLab的博客
04-21 1769
今天我们要做一个调整图片的demo，要求能够通过拖动图片的角标来实现旋转和等比放缩的操作，核心设计思路就是通过鼠标移动的位置和图片原位置的坐标进行数学计算，重新设置图片的宽高、坐标和旋转角度等属性。 一.布局 案例中图片和角标都放置在了对象组父容器中。父容器设置了X、Y原点为50%，即父容器的坐标原点在其中心位置，再设置图片组件的X、Y原点也为50%，并令其XY坐标为(0,0)，则可使图片中心点与...
使用ivx的for组件进行循环创建实现排行榜的经验总结
VXLab的博客
03-11 825
之前在可滑动容器那篇文章的结尾里提到了for循环创建组件，今天就正好详细说一说ivx中for容器来实现循环创建。在实际案例中我们其实是经常需要用到这个功能的，因为他可以把结构一致的组件集合复制创建多份而不是真的去一个一个制作出来，可以节省很多时间。以这个排行榜的demo举例，我们可以看出每位玩家的得分卡片结构是一致的，信息类型也都是头像图片，玩家昵称和得分这三项，只是内容不同。现在就来详细说一下这...
关于ivx中自制轮播页展示效果的经验总结
VXLab的博客
03-11 1316
最近在学习ivx的过程中使用了很多拓展组件中已经封装好的组件，这些组件的功能都是案例中经常用到的，使用起来也十分方便。但是封装好之后对样式的修改就收到了一定程度的限制，所以今天来说一下如何自制一个自己的轮播图，这里先以一个demo为例吧。 1.用一位数组保存要展示的图片资源 既然是轮播图自然要有展示的图片，这个demo是吧图片放在了一个一位数组之中。同时添加一个数值变量–当前序号，他就是代表当前展...
使用ivx滑动时间轴制作动画效果的经验总结
VXLab的博客
04-21 2728
之前的案例中使用过时间轴制作动画效果，其实在ivx中还有一个滑动时间轴组件，它必须添加在画布组件下，虽然也是通过给组件添加轨迹实现播放效果，不过根据名字比较容易理解它是通过滑动来触发播放的，而且可以选择正向播放的滑动方向。今天我们就使用滑动时间轴和遮罩实现一个简单的动画效果。 1.首先我们在画布下添加一个滑动时间轴，高度和宽度与画布一致，然后添加图片素材，左侧的天气图标统一都是宽度200，高度...
使用ivx制作模拟时钟的经验总结
VXLab的博客
04-02 1126
之前的帖子里已经使用时间轴和轨迹实现了很多的效果，今天我们来做一个模拟时钟。主要思路是用一个作为表盘，三个矩形分别作为时针，分针和秒针，通过各自轨迹设置他们在同一时间轴下的转动圈数成一定比例关系。 1.表盘 首先是添加椭圆组件，这里我们需要设置它的原点横纵坐标都是50%，这样椭圆组件的XY坐标就是它的中心店坐标，这个XY坐标在我们设置指针的时候也要用到。 2.添加指针 指针使用矩形来展示的，由于...
页面时间轴滑动特效
07-28
实现按时间排列业务的时间轴滑动特效代码
关于IVX滑动时间轴必须放在画板容器内吗
weixin_69825947的博客
05-02 238
作为一个IVX小白，滑动时间轴真的算是一大天敌了，根本搞不清楚时间轴的赋值问题，直到有一天，我看到了一个案例，才发现原来滑动时间轴是可以不放在画板下的，但是问题来了，为什么别人不用画板容器做出来可以滑动，我自己不用画板做出来的不仅不能滑动，而且各种出问题。这算是ivx的迷惑行为吗？！ ...
iVX低代码平台系列详解 -- 概述篇(二)
热门推荐
白大锅的博客，毕设WangLoveBai_999
07-17 5万+
iVX每个编程人不应错过的低代码平台
iVX开发中整理的常见问题与回答（一）
VXLab的博客
04-27 5163
iVX开发过程中常见问题及回答
iVX能开发哪些什么应用？
VXLab的博客
05-21 2343
iVX能开发哪些应用 iVX是一款高速发展的无代码可视化编程语言，现在已经可以完整覆盖几乎所有操作系统应用的开发，包括： WebApp（通过Web浏览器封装，可以支持各种小程序，Android/iOS App，Win/Mac/Linux App） 原生微信小程序（iVX专门针对微信小程序，单独制作所有相关组件） 原生微信小游戏（iVX专门针对微信小游戏，单独制作所有相关组件） 通过iVX工作台，进入开发的IDE界面，如下图所示： 每一种类型的应用的基本开发模式是一致的，但有着不同的组件集与基本配置设定。因
iVX常用开发技巧（2）—环境宽实现自适应
homjeong的博客
04-15 1108
（一）使用场景 环境宽是行、列组件的属性，在网页开发的过程中，我们需要让网页去适应不同的显示屏的大小，也就是页面的自适应，这时我们就可以用到环境宽属性来实现页面在pc端、手机端无差错的显示。如下图所示的图书管理系统，在网页窗口的大小发生变化时，书籍信息的布局也会自动的做相应调整。 全屏显示下，每行有三列书籍信息。 2.缩小到一定程度后，每行显示两列书籍信息。 3.再缩小后，每行只显示一列书籍信息。 （二）基本用法 要做到上述效果，只需要对书籍信息的单元UI这行进行环境宽属性...
使用ivx制作进场动画的经验总结
VXLab的博客
03-31 2449
在案例制作中为了让展示效果更加精致，可能用到一些进场的小动效。今天使用时间轴和轨迹做了3个小样例给大家作为一个参考。轨迹在之前的帖子里已经讲过了，时间轴可能还比较陌生，可以把它理解为一个对轨迹进行管理的组件。因为有时案例中会有很多组件都分别有各自的轨迹，而它们又是为了实现一个总体效果，这时就会把这些子组件都添加到一个时间轴里统一管理。 一．循环翻转 这个动效比较简单，时间轴内只有一个按钮对象，我...
怎么使用IVX的赋值方式，看IVX的API
最新发布
07-09
<think>我们正在讨论的是iVX平台（低代码开发平台）中的赋值操作和API文档查看方法。根据引用[1]和[2]提供的信息，我们可以这样回答： 1. **在iVX中使用赋值方法**： - iVX采用响应式数据绑定机制，赋值操作通常通过修改`this.data`对象下的属性实现。 - 例如，更新一个名为`count`的变量： ```javascript this.data.count = 10; // 直接赋值 this.updateData(); // 触发视图更新 ``` - 对于对象数组（如问题中的“数据库数据”），需要特别注意使用新对象或新数组替换原数据以触发更新（参考之前回答的不可变性原则）。 2. **查看iVX API文档**： - 在iVX编辑器中，可通过顶部菜单栏的“帮助”->“开发文档”访问官方API文档。 - 文档包含以下核心内容： * **组件API**：各UI组件的方法和事件（如按钮的点击事件） * **全局API**：`this.updateData()`, `this.batchUpdate()`等核心方法 * **数据库操作**：如何调用RestAPI操作数据库[^1] * **第三方服务集成**：AWS服务接口说明（基于引用[2]的后端封装） ### 操作示例：修改对象数组并查看效果 ```javascript // 步骤1：获取需要更新的数据（假设从API获取） const newProduct = {id: 103, name: "新产品", price: 299}; // 步骤2：更新到对象数组 this.data.数据库数据.push({...newProduct}); // 步骤3：强制渲染 this.updateData(); ``` ### 关键注意事项 - **调试技巧**：在赋值后使用`console.log(this.data.数据库数据)`验证数据状态 - **版本控制**：如引用[1]所述，可通过“文件->历史版本”回退误操作 - **企业数据库**：直接赋值仅影响前端状态，持久化需调用后端API[^1] §§相关问题§§ 1. iVX中如何调用RestAPI更新数据库？ 2. 为什么在iVX中修改了数据但界面没有刷新？ 3. iVX的企业数据库和本地测试数据库有什么区别？ 4. 如何调试iVX中的JavaScript代码？</think>### 在IVX中使用赋值方法 IVX采用响应式数据绑定机制，赋值操作主要通过修改`this.data`对象实现。以下是核心方法： #### 1. **基本变量赋值** ```javascript // 修改单个变量 this.data.变量名 = 新值; this.updateData(); // 必须调用以刷新界面 ``` #### 2. **对象数组赋值**（针对"数据库数据"） ```javascript // 完全替换数组 this.data.数据库数据 = [...新数组]; // 修改特定项 this.data.数据库数据[index] = {...新对象}; // 添加新项 this.data.数据库数据.push({...新对象}); this.updateData(); // 更新视图 ``` #### 3. **批量赋值优化** ```javascript this.batchUpdate(() => { this.data.变量1 = 值1; this.data.数据库数据[0].属性 = 新值; // 更多操作... }); // 自动触发单次渲染（推荐大数据量场景） ``` ### 查看IVX API文档 IVX官方文档提供完整的API参考： #### 访问路径： 1. **编辑器内访问** - 顶部菜单栏 → 帮助 → 开发文档 - 右键点击组件 → "查看组件文档" 2. **在线文档** 官方文档中心： [https://doc.ivx.cn/](https://doc.ivx.cn/)（参考引用[1]的文件管理说明） #### 核心API分类： | 类别 | 包含内容 | 文档位置 | |------|----------|----------| | **数据操作** | `updateData()`, `batchUpdate()` | "数据绑定"章节 | | **组件API** | 按钮/表格等组件方法 | "组件参考"目录 | | **数据库** | RestAPI调用、云数据库操作 | "后端服务" → "数据库" | | **动画控制** | Pixi.js/Three.js集成（引用[2]） | "动画引擎"章节 | | **调试工具** | 实时日志、错误追踪 | "开发者工具"部分 | > **最佳实践**：在编辑器中按 **F1** 可直接搜索当前场景相关API，文档包含可运行的代码示例[^1]。 --- ### 常见问题解决方案 **问题：赋值后界面未更新** ```javascript // 错误：直接修改对象属性 ❌ this.data.数据库数据[0].name = "新名称"; // 正确：创建新对象 ✅ const newData = [...this.data.数据库数据]; newData[0] = {...newData[0], name: "新名称"}; this.data.数据库数据 = newData; this.updateData(); ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值