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

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

一.纵向滚动
1.界面
首先搭建一个以下图所示的简易界面，在绝对定位容器内进行循环建立，数据来源为一个一维数组，点击add按钮能够将输入框的内容添加到一维数组的末尾。


2.文本组件的坐标
因为循环建立是在绝对定位环境下，因此咱们须要设置建立出来的每个文本组件的XY坐标，不过因为列表中文本组件的X坐标都是相同的，所以咱们只须要考虑Y坐标的值。这里咱们借助循环建立中的参数“当前序号1”，由于已经设置了每一个文本组件的高度是50px，而“当前序号1”的值又是0，1，2…，因此令每一个文本组件的Y坐标为当前序号*50，它们便可从上到下依次排列。

3.缓动距离
上一步中应该注意到文本组件的Y坐标用当前序号1乘以50以后还减去了一个数值变量“缓动距离”。由于文本向上滚动是一个逐渐滑出界面的过程，这里用“缓动距离”表示文本滑出界面部分的高度，并且当第一行文本向上移动后其它文本组件的位置也会随之改变，所以每一个文本组件的Y坐标都要再减去一个“缓动距离”。

4.触发器事件
接下来就是经过触发器不断改变缓动距离实现向上滚动的效果。咱们让触发器每隔0.01s触发一次，将全部文本组件上移0.4px也就是“缓动距离”加上0.4，直到缓动距离大于等于50，此时第一行文本恰好完全移出界面，咱们将缓动距离归零，并把第一行文本的内容，也就是一维数组的第一个元素移到数组末尾。这里用slice()方法提取了一维数组1号元素及以后的元素造成一个新的数组，而后用这个新的数组和原数组的0号元素组合并从新赋值给原一维数组。至此，一个纵向循环滚动的效果就制做完成了。


二.横向滚动
1.与纵向滚动区别
横向滚动中咱们是将一整句话按单词拆开，每一个单词存为数组的一个元素，再进行循环建立，那么每一个单词的长度不必定相等，因此每一个文本组件的宽度也要特别设置，并且参数“缓动距离”的范围也要随着数组第一个元素的内容改变而变化。另外循环建立出来的每一个文本组件的横坐标跟排在它前面的全部数组元素的长度都有关，因此相对于纵向滚动咱们须要做出一些改进。


1文本组件的数据绑定
对于循环建立的文本组件，咱们将X坐标填入“一维数组1.slice( 0 , 当前序号1 ).join(“”).length*12+当前序号1*3-缓动距离”，这里是先使用slice()方法将一维数组中当前元素以前的元素提取为一个新的数组，将这个新的数组用join()方法转换成一个字符串，并计算字符串中的字符数量而后乘以12（这里的12是取了比每一个英文字母所占的px宽度略大一点的值），另外还要加上“当前序号1*3”，这里的3是文本组件之间的间距，乘以当前序号1即前面全部间距的和，最后与纵向滚动同理最后也要减去“缓动距离”。至于文本组件的宽度就设置为当前数据的长度*12便可，注意要与X坐标属性中填入的值保持一致。

2.触发器的改动
对于触发器，咱们须要更改触发事件中的条件判断，前面说过缓动距离与一维数组的第一个元素内容长度有关，因此用length计算0号元素的长度并乘以12而后加上一个文本间距的宽度3做为“缓动距离”的最大取值，当“缓动距离”大于等于这个值时则说明第一个单词所有滑出界面，此时就能够将一维数组的0号元素调整到数组末尾。（数组元素直接用length计算长度会报错，须要加上一个空字符转换成字符串格式）

总结
这个demo中主要仍是把握滚动效果的原理，循环建立自己就是依照数据来源数组的次序进行建立，咱们要作的其实就是将第一个元素滑动到界面外，而后将其插到数组末尾，造成一个循环，中间经过数据绑定计算各个文本组件的位置关系。但愿你们可以理解，案例也展现出来的效果各式各样，但都只不过是其背后逻辑计算的最终体现，只有清晰的把握住案例的逻辑才是最重要的。