ivx如何自制輪播頁展示效果？

今天小編就為大家帶來一篇有關ivx自制輪播頁展示效果的文章。小編覺得挺實用的，為此分享給大家做個參考。一起跟隨小編過來看看吧。

1.用一位數組保存要展示的圖片資源
既然是輪播圖自然要有展示的圖片，這個demo是吧圖片放在了一個一位數組之中。同時添加一個數值變量--當前序號，他就是代表當前展示的是四張圖片里的哪一張圖片。

2.圖片展示部分
然后就是圖片的展示部分，中間的是圖片組件，左右兩個圖標則是用于切換展示圖片的。

圖片組件的資源地址數據綁定了一維數組中的某一個元素，而這個元素會隨著當前序號這個變量的值改變而改變。一維數組中有四張圖片的序號從0開始分別是0,1,2,3，比如當前序號等于0時，圖片組件就會顯示的是一位數組中序號為0的第一張圖片。

3.圖片的輪播
demo中圖片的輪播是靠左右兩個箭頭實現的。點擊右箭頭當前序號+1，就會展示一位數組中的下一張圖片。這里要注意一下邊界的處理，因為當你展示到第四張圖片時當前序號已經是3了，點擊右箭頭后再+1就會變成4，而此時一維數組中沒有序為4的第五個圖片元素，所以我們要把當前序號重新置為0，從頭開始展示（一位數組序號從0開始，0,1,2···，n-1，元素個數就是n，所以當序號等于n就可以判定超界）。
左箭頭的事件是同一個道理，點擊一次當前序號減1，展示一位數組中的前一張圖片，等展示到序號為0的第一張圖片時再減1就會變成-1，這是我們就需要把序號置成最后一張圖片的序號重新展示。這樣當前序號就會只在0,1,2,3。這四個值之間切換了。

4.圖片輪播部分的改進——一維數組內的圖片數量未知
因為實際案例可能存在這樣的使用場景，一位數組的圖片是從數據庫中獲取的，圖片數量還可能還會添加或減少，所以在寫邏輯的時候邊界處理中不能直接寫成固定數值。比如一位數組中又添加了一張圖片，此時按之前的寫法依舊會只能展示出前四張圖片，上邊界處理就有問題了?？梢愿倪M成如下樣式，將4改成一維數組的元素個數（其實可以發現4就是demo中一位數組的元素個數啦）。

5.圖片輪播部分的改進——自動播放
在這個demo中圖片的輪播是靠點擊圖標完成的，但是我很懶并且任性，我不想點我還想讓他自動播放下一張。這里也是有方法的，就是配合觸發器實現。在行里面添加一個觸發器。

觸發器的屬性面板有四項，播放次數就是觸發器可以觸發多少次，時間間隔則是相鄰兩次觸發的時間間隔，自動播放打開則觸發器自己就開始觸發一次接一次直到達到播放次數或者你讓他暫停，動畫優化屬于性能上的優化。

這里給觸發器添加事件，然后就是把點擊右箭頭的事件復制過來啦。開啟觸發器的自動播放，設置時間間隔為1s，那么每過1秒當前序號都會+1，輪播器也就自然每過1秒就播放下一張圖片了。


6.指示器部分
demo中是使用了四個行組件來實現指示器的，每個行的顏色都進行了數據綁定。這里采用了三元表達式，就是當前序號等于2成立背景顏色就是前面的#5FA2DD，若不成立就是后面的#E6E9F5（顏色代碼）。這樣綁定后例如當前序號是0則只有行1的三元表達式值為真背景顏色是藍色，其余三個行組件三元表達式都為假，顯示后面的灰色。


7.指示器部分的改進
首先demo中的指示器是用一個一個空的行來實現的，但是即使是空行還是會在代碼中創建完整的對象而耗費很多資源，所以可以換成分割線這一組件。多人，如果對于樣式有自己的要求，也可以用圖片和圖標實現。

還有就是demo中的圖片是固定的四張，而實際使用中圖片的數量可能是不確定的，所以我們可以用循環創建來創建出與圖片對應的數量的指示器。這樣就只需要創建一個指示器，而從固定數值改成的紫色當前序號1就是循環創建中創建的第幾個指示器，這部分可以參考講循環創建的那篇帖子。


看完上述內容，你們掌握ivx自制輪播頁展示效果的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！