微信小程序?qū)嵗簩?shí)現(xiàn)3D輪播圖特效代碼

來(lái)源：不言發(fā)布時(shí)間：2018-08-29 16:22:40 閱讀量：1298

本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于微信小程序?qū)嵗簩?shí)現(xiàn)3D輪播圖特效代碼，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。

在寫微信小程序時(shí)，有寫到實(shí)現(xiàn)3D輪播圖的效果，可以直接使用微信小程序中自帶的組件swiper來(lái)實(shí)現(xiàn)

效果圖如下：

1.swiper的相關(guān)屬性

indicator-dots 是否顯示小圓點(diǎn)，也可以自己重新設(shè)置小圓點(diǎn)

circular 是否銜接滑動(dòng)，就是實(shí)現(xiàn)無(wú)限滾動(dòng)

previous-margin 與上一張圖片的間距

next-margin 與下一張圖片的間距

autoplay 實(shí)現(xiàn)自動(dòng)滾動(dòng)

這里主要利用了circular實(shí)現(xiàn)無(wú)限滾動(dòng)，然后再加上前后間距，再設(shè)置圖片的層級(jí)和透明度就可以實(shí)現(xiàn)了,將圖片及容器的高度設(shè)置好就差不多可以實(shí)現(xiàn)了

wxml文件

wxss文件

JS文件

標(biāo)簽：小程序

評(píng)論：

你還沒有登錄，請(qǐng)先