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

效果

wxml

 

   

       

           

       

   

 

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,

    })

  },

})