使用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中主要仍是把握滾動效果的原理，循環建立自己就是依照數據來源數組的次序進行建立，咱們要作的其實就是將第一個元素滑動到界面外，而後將其插到數組末尾，造成一個循環，中間經過數據綁定計算各個文本組件的位置關係。但願你們可以理解，案例也展現出來的效果各式各樣，但都只不過是其背後邏輯計算的最終體現，只有清晰的把握住案例的邏輯纔是最重要的。