微信小程序旋轉(zhuǎn)木馬/縮放輪播圖效果

微信小程序旋轉(zhuǎn)木馬/縮放輪播圖效果是一種什么樣的效果，如何實現(xiàn)這一效果，下面為大家介紹這篇文章。

效果

文章涉及技術(shù)點

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

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

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

我們需要自己實現(xiàn)的功能

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

就能分成兩種實現(xiàn)方式:

wxss實現(xiàn) 
js實現(xiàn)

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

1. //.wxml
2. <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'>
3. <block wx:for="{{imgUrls}}" wx:key="{{index}}">
4. <swiper-item>
5. <image src="{{item}}" class="slide-image {{swiperIndex == index ? 'active' : 'quiet'}}" mode='aspectFill'>
6. </image>
7. </swiper-item>
8. </block>
9. </swiper>

1. //.wxss
2. .swiperClass {
3. margin: 0;
4. margin-top: 10px;
5. }
6.  
7. .slide-image {
8. width: 100%;
9. height: 90%;
10. border-radius: 10px;
11. position: relative;
12. }
13.  
14. image.active {
15. transform: none;
16. transition: all 0.2s ease-in 0s;
17. }
18.  
19. image.quiet {
20. transform: scale(0.8333333);
21. transition: all 0.2s ease-in 0s;
22. }

1. //.js
2. data: {
3. imgUrls: [
4. 'xxx',
5. 'xxx',
6. 'xxx',
7. 'xxx'
8. ],
9. swiperIndex: 0 //這里不寫第一次啟動展示的時候會有問題
10. },
11.  
12. bindchange(e) {
13. this.setData({
14. swiperIndex: e.detail.current
15. })
16. },

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

Hishop小程序工具開發(fā)公司長沙海商，是一家有著十年技術(shù)前沿的公司，我們以先進技術(shù)提供并解決各行業(yè)小程序開發(fā)，操作簡單，支持多種社群營銷活動，以及可視化模板操作，大大減少人力物力成本。

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。更多小程序商店請查看：小程序商店