微信小程序swiper实现滑动放大缩小效果

 

.swiper-block{

height: 480rpx;

width: 100%;

}

.swiper-item{

display: flex;

flex-direction: column;

justify-content: center;

align-items: flex-start;

overflow:unset;

}

.slide-image{

height:320rpx;

width: 520rpx;

border-radius: 9rpx;

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

margin: 0rpx 30rpx;

z-index: 1;

}

.active{

transform: scale(1.14);

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

z-index: 20;

}.swiper-block{

height: 480rpx;

width: 100%;

}

.swiper-item{

display: flex;

flex-direction: column;

justify-content: center;

align-items: flex-start;

overflow:unset;

}

.slide-image{

height:320rpx;

width: 520rpx;

border-radius: 9rpx;

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

margin: 0rpx 30rpx;

z-index: 1;

}

.active{

transform: scale(1.14);

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

z-index: 20;

}

 

Page({

data: {

imgUrls: [

'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',

'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',

'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'

],

indicatorDots: false,

autoplay: false,

interval: 5000,

duration: 1000

},

swiperChange(e) {

const that = this;

that.setData({

swiperIndex: e.detail.current,

})

}

})