微信小程序swiper轮播图缩放效果

微信小程序swiper轮播图缩放效果

话不多说请看代码：

主要是借助了swiper的previous-margin、next-margin、以及css动画。
wxml:

<swiper class="carousel" indicator-dots="{{true}}"  interval="{{2000}}" duration="{{1000}}"
	previous-margin="50px" next-margin="50px"  bindchange="swiperChange">
	<swiper-item class="swiper-item" wx:for="{{carousel.imgs}}"  wx:for-item="item" wx:key="id">
		<image src="{{item.imgId}}" class="carousel-image {{carousel.currentIndex == index ? 'active' : 'quiet'}}"
			mode="scaleToFill" />
	</swiper-item>
</swiper>

wxss:

.carousel {
	width: 100%;
	height: 950rpx;
}

.carousel .carousel-image {
	width: 100%;
	height: 80%;
	border-radius: 9rpx;
}

.carousel .quiet {  //css动画很重要，没有这段缩放功能实现不了
	transform: scale(0.8333333);
	transition: all 0.5s ease-in 0s;
}

.carousel .active {
	transform: none;
	transition: all 0.5s ease-in 0s;
}

js:
我这边用的是本地图片引用

Page({
	data: {
		carousel: {
			imgs: [
				{
					imgId:"../../images/icon/a.jpg"
				},
				{
					imgId:"../../images/icon/e.jpg"
				},
				{
					imgId:"../../images/icon/w.jpg"
				},
				{
					imgId:"../../images/icon/r.jpg"
				},
				{
					imgId:"../../images/icon/t.jpg"
				},
			],
			currentIndex: 0
		},
	},

	onLoad: function () {
		
	},
	
	swiperChange: function (e) {
		var that = this;
		var carousel = that.data.carousel;
		carousel.currentIndex = e.detail.current;
		that.setData({
			carousel: carousel
		});
	}
})

转载https://zhuanlan.zhihu.com/p/93501644