微信小程序3D轮播图

一、最终效果

二、利用原生swiper制作3D效果

1、需要注意的几个API

previous-margin：说白了就是前一张图片能露多少。
next-margin：说白了就是后一张图片能露多少。
circular：这个属性也是需要加的，加不加什么区别，一对比就知道。

2、上代码

wxml

 <view class="swiper_wrapper">
    <swiper 
      autoplay 
      indicator-dots 
      indicator-color="#8FA2EF" 
      indicator-active-color="#2F54EB" 
      class="swiper_two"
      previous-margin="150rpx"
      next-margin="150rpx"
      circular
      bindchange="handleChangeTwo">
      <block wx:for="{{swiperTwoInfo}}" wx:key="key">
          <swiper-item class="item">
            <image mode="aspectFit" class="swiper_two_img {{currentIndex4 == index ? 'active' : ''}}" src="{{item.imgSrc}}" />
          </swiper-item>
        </block>
    </swiper>
  </view>

wxss

.swiper_wrapper{
  margin-bottom: 34rpx;
}
.swiper_two{
  width: 100%;
  height: 500rpx;
}
.swiper_two_img{
  width: 100%;
  display: block;
  //重点是以下三句
  transform: scale(0.8);
  transition: all 0.3s ease;
  border-radius: 6px;
}
.active{
  transform: scale(1);
 }

js
现在data中定义当前图片的索引：

data:{
	// 轮播图二当前突出图片索引
    currentIndex4: 0,
    swiperTwoInfo:[
      {
        key:'21',
        imgSrc:'../../../static/imgs/department_introduce/achievements_summary/swiper_two.png'
      },
      {
        key:'22',
        imgSrc:'../../../static/imgs/department_introduce/achievements_summary/swiper_two.png'
      },
      {
        key:'233',
        imgSrc:'../../../static/imgs/department_introduce/achievements_summary/swiper_two.png'
      },
    ],
}

其次是swiper的change事件处理函数；

/* 实现控制中间凸显图片的样式 */
handleChangeTwo: function(e) {
    this.setData({
      currentIndex4: e.detail.current
    })
  },

ARTICLE ENDING