在案例中,为了使展示效果更佳,我们通常可以给文本加上一个纵向或者横向的滚动效果,其基本原理就是将文本信息放入一个数组循环创建,通过触发器不断调整它们的坐标,每当第一个元素内容滚动出界面就将其调整至一维数组的末尾,下面就来讲一讲具体步骤吧。
一.纵向滚动
1.界面
首先搭建一个如下图所示的简易界面,在绝对定位容器内进行循环创建,数据来源为一个一维数组,点击add按钮可以将输入框的内容添加到一维数组的末尾。
2.文本组件的坐标
由于循环创建是在绝对定位环境下,所以我们需要设置创建出来的每一个文本组件的XY坐标,不过由于列表中文本组件的X坐标都是相同的,因此我们只需要考虑Y坐标的值。这里我们借助循环创建中的参数“当前序号1”,因为已经设置了每个文本组件的高度是50px,而“当前序号1”的值又是0,1,2…,所以令每个文本组件的Y坐标为当前序号50,它们即可从上到下依次排列。
3.缓动距离
上一步中应该注意到文本组件的Y坐标用当前序号1乘以50之后还减去了一个数值变量“缓动距离”。因为文本向上滚动是一个逐渐滑出界面的过程,这里用“缓动距离”表示文本滑出界