ivx如何自制輪播頁(yè)展示效果？

今天小編就為大家?guī)?lái)一篇有關(guān)ivx自制輪播頁(yè)展示效果的文章。小編覺(jué)得挺實(shí)用的，為此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

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

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

圖片組件的資源地址數(shù)據(jù)綁定了一維數(shù)組中的某一個(gè)元素，而這個(gè)元素會(huì)隨著當(dāng)前序號(hào)這個(gè)變量的值改變而改變。一維數(shù)組中有四張圖片的序號(hào)從0開(kāi)始分別是0,1,2,3，比如當(dāng)前序號(hào)等于0時(shí)，圖片組件就會(huì)顯示的是一位數(shù)組中序號(hào)為0的第一張圖片。

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

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

5.圖片輪播部分的改進(jìn)——自動(dòng)播放
在這個(gè)demo中圖片的輪播是靠點(diǎn)擊圖標(biāo)完成的，但是我很懶并且任性，我不想點(diǎn)我還想讓他自動(dòng)播放下一張。這里也是有方法的，就是配合觸發(fā)器實(shí)現(xiàn)。在行里面添加一個(gè)觸發(fā)器。

觸發(fā)器的屬性面板有四項(xiàng)，播放次數(shù)就是觸發(fā)器可以觸發(fā)多少次，時(shí)間間隔則是相鄰兩次觸發(fā)的時(shí)間間隔，自動(dòng)播放打開(kāi)則觸發(fā)器自己就開(kāi)始觸發(fā)一次接一次直到達(dá)到播放次數(shù)或者你讓他暫停，動(dòng)畫優(yōu)化屬于性能上的優(yōu)化。

這里給觸發(fā)器添加事件，然后就是把點(diǎn)擊右箭頭的事件復(fù)制過(guò)來(lái)啦。開(kāi)啟觸發(fā)器的自動(dòng)播放，設(shè)置時(shí)間間隔為1s，那么每過(guò)1秒當(dāng)前序號(hào)都會(huì)+1，輪播器也就自然每過(guò)1秒就播放下一張圖片了。


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


7.指示器部分的改進(jìn)
首先demo中的指示器是用一個(gè)一個(gè)空的行來(lái)實(shí)現(xiàn)的，但是即使是空行還是會(huì)在代碼中創(chuàng)建完整的對(duì)象而耗費(fèi)很多資源，所以可以換成分割線這一組件。多人，如果對(duì)于樣式有自己的要求，也可以用圖片和圖標(biāo)實(shí)現(xiàn)。

還有就是demo中的圖片是固定的四張，而實(shí)際使用中圖片的數(shù)量可能是不確定的，所以我們可以用循環(huán)創(chuàng)建來(lái)創(chuàng)建出與圖片對(duì)應(yīng)的數(shù)量的指示器。這樣就只需要?jiǎng)?chuàng)建一個(gè)指示器，而從固定數(shù)值改成的紫色當(dāng)前序號(hào)1就是循環(huán)創(chuàng)建中創(chuàng)建的第幾個(gè)指示器，這部分可以參考講循環(huán)創(chuàng)建的那篇帖子。


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