微信小程序缩放式轮播图实现

sliderTest.js

Page({
  data:{
    curIndex: 1 // 此处可指定初始状态显示第几个页面
  },
  onSwiperChange: function(event) {
    this.setData({ curIndex: event.detail.current })
  }
})

sliderTest.wxml

<!-- 此处duration时间应当与下面的-webkit-transition一致 -->
<swiper duration="300" bindchange="onSwiperChange" current="{{ curIndex }}">
    <swiper-item wx:for="[0, 1, 2]" style="overflow: visible;">
        <view style="width: 100%; height: 100%; background: #2bbfff; -webkit-transform: scale({{ curIndex == index ? 0.78 : 0.7 }}) translate({{ (curIndex == index - 1 || curIndex == index + 1) ? (curIndex - index) * 30 : 0 }}%, 0); -webkit-transition: .3s; position: relative;">

        </view>
    </swiper-item>
</swiper>