微信小程序swiper切换特效

如果觉得微信小程序的切换太过生硬，可以看看下面我的方法：

wxml：

<swiper indicator-dots="true" autoplay="true" interval="{{interval}}" duration="{{duration}}" circular="true" current="{{bannerCurrent}}" bindchange="bannerChange">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item.src}}" data-index='{{index}}' class="slide-image {{bannerCurrent==index?'slide-active':''}}" style="transition: all {{duration/1000}}s" bindtap='toGuangGao'/>
    </swiper-item>
  </block>
</swiper>

js：

//index.js
//获取应用实例
const app = getApp();
Page({
  data: {
    imgUrls: [
      '../../images/home_banner.png',
      '../../images/home_banner.png',
      '../../images/home_banner.png'
    ],
    interval: 5000,
    duration: 1000,
    bannerCurrent: 0,
  },
  //轮播current切换监听事件
  bannerChange: function(e){
    console.log("监听轮播事件",e);
    this.setData({
      bannerCurrent: e.detail.current
    })
  },


  onLoad: function (options) {
    let that= this;
    

  }

})

wxss：

.slide-image{
  width:100%;
  height:100%;
  transform: scale(0.6,0.6);
  border-radius:10rpx;
  overflow: hidden;
}
.slide-active{
  transform: scale(1,1);
}

思路其实很简单，只要监听当前的图片的current的变化就可以了。