使用ivx实现文本纵向和横向滚动效果的经验总结

本文总结了使用ivx实现文本纵向和横向滚动的步骤。纵向滚动通过调整Y坐标和缓动距离,利用触发器实现文本向上滚动并循环。横向滚动则需考虑单词长度和间距,动态计算X坐标。理解滚动效果的原理和数据绑定计算是关键。
摘要由CSDN通过智能技术生成

在案例中,为了使展示效果更佳,我们通常可以给文本加上一个纵向或者横向的滚动效果,其基本原理就是将文本信息放入一个数组循环创建,通过触发器不断调整它们的坐标,每当第一个元素内容滚动出界面就将其调整至一维数组的末尾,下面就来讲一讲具体步骤吧。

一.纵向滚动
1.界面
首先搭建一个如下图所示的简易界面,在绝对定位容器内进行循环创建,数据来源为一个一维数组,点击add按钮可以将输入框的内容添加到一维数组的末尾。
在这里插入图片描述
在这里插入图片描述
2.文本组件的坐标
由于循环创建是在绝对定位环境下,所以我们需要设置创建出来的每一个文本组件的XY坐标,不过由于列表中文本组件的X坐标都是相同的,因此我们只需要考虑Y坐标的值。这里我们借助循环创建中的参数“当前序号1”,因为已经设置了每个文本组件的高度是50px,而“当前序号1”的值又是0,1,2…,所以令每个文本组件的Y坐标为当前序号50,它们即可从上到下依次排列。
在这里插入图片描述
3.缓动距离
上一步中应该注意到文本组件的Y坐标用当前序号1乘以50之后还减去了一个数值变量“缓动距离”。因为文本向上滚动是一个逐渐滑出界面的过程,这里用“缓动距离”表示文本滑出界

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值