The principle of

  • Wechat small program, the principle is actually to get the current round of the ID, and magnify it (activeVisible in style), isswiperIndex == index ? "Active" : ""But see the effect very obvious, as well as the picture shadow processing.

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,
    })
  },
Copy the code

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>
Copy the code

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; }Copy the code

The effect

Reference: blog.csdn.net/weixin_4261…