微信小程序怎么實現旋轉木馬效果

這篇文章主要介紹“微信小程序怎么實現旋轉木馬效果 ”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“微信小程序怎么實現旋轉木馬效果 ”文章能幫助大家解決問題。

文章涉及技術點

微信小程序原生Swiper控件
Wxss Transform、Transition
輪播條滾動回調控制
微信小程序條件渲染、列表渲染

全部實現代碼加起來也就三四十行，大部分還用來寫wxml UI代碼，所以功能實現起來非常簡單。 
首先將問題簡單化，能用原生組件實現出我們想要的效果，絕不自己開發Component。原因：我懶+我自己寫的也不敢說性能堪比原生組件

先來分析一波gif中我們需要實現效果和哪些效果可以直接修改原生Swiper的屬性就能實現的

我們需要自己實現的功能

自動滾動+手動拖拽 （原生組件幫我們完成 Property：autoplay） 
面板指示點 （原生組件幫我們完成 Property：indicator-dots） 
左右可以露出非Active狀態圖的邊緣（即Quiet狀態， 后文class會以這兩個名字定義） （原生組件幫我們完成 Property：previous-margin、next-margin） 
圖片滾動到中心位置放大，滾動出去縮小 （我們手寫實現，利用技術點中提到的滾動回調+條件渲染。其中滾動回調用 Property：bindchange） 
這樣看下來就很清晰了，需要我們實現的只有一個動畫放大縮小。再進一步

就能分成兩種實現方式:

wxss實現 
js實現

很顯然wxss實現代碼很少也能達到同樣的效果，so~

//.wxml<swiper class='swiperClass' autoplay indicator-color="#a39f99" indicator-active-color="#f49641" indicator-dots interval="2000" duration="1000" previous-margin="30px" next-margin="30px" circular bindchange="bindchange" style='height: {{swiperHeight}}px'><block wx:for="{{imgUrls}}" wx:key="{{index}}"><swiper-item><image src="{{item}}" class="slide-image {{swiperIndex == index ? 'active' : 'quiet'}}" mode='aspectFill'></image></swiper-item></block></swiper>

//.wxss.swiperClass {margin: 0;margin-top: 10px;} .slide-image {width: 100%;height: 90%;border-radius: 10px;position: relative;} image.active {transform: none;transition: all 0.2s ease-in 0s;} image.quiet {transform: scale(0.8333333);transition: all 0.2s ease-in 0s;}

//.jsdata: {imgUrls: ['xxx','xxx','xxx','xxx'],swiperIndex: 0 //這里不寫第一次啟動展示的時候會有問題}, bindchange(e) {this.setData({swiperIndex: e.detail.current})},

上面Swiper控件里面還有設置寬高的屬性就隨便填幾個數測試就好了，不影響主要功能。

關于“微信小程序怎么實現旋轉木馬效果 ”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。