前言

看下效果吧

分析

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

直接上代碼吧，嘻嘻

wxml

//.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>

wxss

//.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;

//.js
data: {
    imgUrls: [
‘http://img17.3lian.com/201612/16/88dc7fcc74be4e24f1e0bacbd8bef48d.jpg‘,
      ‘http://f0.topitme.com/0/6a/6c/11800178627706c6a0o.jpg‘,
 ‘http://img17.3lian.com/d/file/201701/05/14d111f12c9fa2796c774ffef1bbfe14.jpg‘,
 ],
    swiperIndex: 0 ,//這裏不寫第一次啟動展示的時候會有問題
    swiperHeight:300
 },
 
bindchange(e) {
 this.setData({
      swiperIndex: e.detail.current
 })

小程序旋轉木馬 輪播圖