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

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

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

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

效果圖如下：

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

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

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

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

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

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

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

wxml文件

wxss文件

JS文件

標(biāo)簽：小程序

評論：

你還沒有登錄，請先