微信小程序swiper轮播图缩放效果
主要是借助了swiper的previous-margin、next-margin、circular属性，以及css动画。
circular：让图片循环连接上
previous-margin： 与前一张图片的间距
next-margin：与后一张图片的间距
previous-margin和next-margin可以使前后的图片漏出一小边，但是注意: 官方文档上说单位使用rpx和px都可以，经我测试使用rpx渲染会变形，一定要使用px。
代码
wxml:
<swiper class="carousel" indicator-dots="{{true}}" autoplay="{{true}}" interval="{{3000}}" duration="{{1000}}" previous-margin="50px" next-margin="50px" circular="true" bindchange="swiperChange"> <swiper-item class="swiper-item" wx:for="{{carousel.imgs}}" wx:for-item="item"> <image src="{{item.imgId}}" class="carousel-image {{carousel.currentIndex == index ? 'active' : 'quiet'}}" mode="scaleToFill"/> </swiper-item> </swiper> |
wxss:
.carousel{ width: 100%; height: 350rpx;}.carousel .carousel-image{ width: 100%; height: 80%; border-radius: 9rpx;}.carousel .quiet { 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: [], currentIndex: 0 }, }, onLoad: function() { var that = this; that.getCarouselImgs(); }, //渲染轮播 getCarouselImgs: function (e) { var that = this; wx.cloud.callFunction({ name: 'db', data: { $url: 'getCarouselImgs' } }).then((res) => { var that = this; var carousel = {}; carousel.imgs = res.result.data; carousel.currentIndex = 0; that.setData({ carousel: carousel }); }).catch((e) => { console.log(e); }); }, swiperChange: function (e) { var that = this; var carousel = that.data.carousel; carousel.currentIndex = e.detail.current; that.setData({ carousel: carousel }); }}) |
我这里的图片是从云端获取的，你可以根据自己的需要修改