小程序模板網(wǎng)

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

發(fā)布時(shí)間:2018-07-27 11:55 所屬欄目:小程序開發(fā)教程

話不多說先上圖.gif

 

文章涉及技術(shù)點(diǎn)

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

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

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

 

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

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

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

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

很顯然wxss實(shí)現(xiàn)代碼很少也能達(dá)到同樣的效果,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 //這里不寫第一次啟動(dòng)展示的時(shí)候會(huì)有問題
  10. },
  11.  
  12. bindchange(e) {
  13. this.setData({
  14. swiperIndex: e.detail.current
  15. })
  16. },

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

注意身體,小心禿頂



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/24662.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢