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

时间:2024-03-19 13:24:11

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

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

<block wx:for="{{imgUrls}}" wx:index="{{index}}">

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

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

</swiper-item>

</block>

</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,

})

}

})