【微信小程序】轮播图当前图放大效果

原理

• 微信小程序，原理其实就是获取当前轮播的id ，并将其放大（active样式中可见），就是swiperIndex == index ? ‘active’ : ‘’，但看到效果很明显，以及图图片阴影处理。

js

data: {
    swiperImgUrls: [
      '/assets/img/extension.png','/assets/img/extension.png','/assets/img/extension.png',
    ],
    swiperIndex: 0
  },
  onLoad: function (options) {
  },
  swiperChange(e) {
    const that = this;
    that.setData({
      swiperIndex: e.detail.current,
    })
  },

wxml

<swiper class='swiper-block' autoplay='{{false}}' circular='true' previous-margin='90rpx' next-margin='90rpx' current='0' bindchange='swiperChange'>
<block wx:key='*this' wx:for='{{swiperImgUrls}}'>
  <swiper-item class='swiper-item'>
    <image mode='aspectFill' src='{{item}}' class='slide-image {{swiperIndex == index ? "active" : ""}}' />
  </swiper-item>
</block>
</swiper>

wxss

.swiper-block {
  height: 300rpx;
  width: 100%;
}
  
  .swiper-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    overflow: unset;
  }
  
  .slide-image {
    height: 250rpx;
    width: 520rpx;
    border-radius: 9rpx;
    box-shadow: 0px 0px 30rpx rgba(0, 0, 0, 0.2);
    margin: 0rpx 30rpx;
    z-index: 1;
  }
  
  .active {
    transform: scale(1.14);
    transition: all 0.2s ease-in 0s;
    z-index: 20;
  }

效果

借鉴：blog.csdn.net/weixin_4261…