微信小程序轮播图banner 当前图片放大

效果

wxml

<view>

  <swiper  class="swiper-block"  previous-margin="70rpx" next-margin="70rpx" current="0" bindchange="swiperChange" circular="true">

    <block wx:for="{{bannerList}}" wx:index="{{index}}" wx:key="bannerList">

        <swiper-item class="swiper-item">

            <image mode="aspectFill" src="{{item.src}}" class="slide-image {{swiperIndex == index ? 'active' : ''}}"/>

        </swiper-item>

    </block>

  </swiper>

<view>

wxss

.swiper-block{

  height: 320rpx;

  width: 100%;

}

.swiper-item{

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  overflow:unset;

  text-align: center;

}

.slide-image{

  height:230rpx;

  width: 526rpx;

  border-radius: 10rpx;

  box-shadow: 0px 0px 30rpx rgba(0, 0,0,.2);

  margin: 0rpx 30rpx;

  z-index: 1;

}

.active{

  transform: scale(1.21);

  transition:all .2s ease-in 0s;

  z-index: 20;

}

js

Page({

  data: {

    ajaxUrl: app.ajaxUrl,

    swiperIndex: 0,

    bannerList: [

      {

        src: '../../img/banner1.png',

        id: 0

      },

      {

        src: '../../img/ban2.png',

        id: 1

      },

      {

        src: '../../img/icon-ts-mrpic.png',

        id: 2

      },

      {

        src: '../../img/home.png',

        id: 3

      }

    ]

  },

  swiperChange(e) {

    const that = this;

    that.setData({

      swiperIndex: e.detail.current,

    })

  },

})