微信小程序swiper图片尺寸_微信小程序swiper轮播图缩放效果

主要是借助了swiper的previous-margin、next-margin、circular属性，以及css动画。

circular：让图片循环连接上

previous-margin： 与前一张图片的间距

next-margin：与后一张图片的间距

previous-margin和next-margin可以使前后的图片漏出一小边，但是注意: 官方文档上说单位使用rpx和px都可以，经我测试使用rpx渲染会变形，一定要使用px。

代码

wxml:

autoplay="{{true}}" interval="{{3000}}" duration="{{1000}}" previous-margin="50px" next-margin="50px" circular="true" bindchange="swiperChange">

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

});

}

})

我这里的图片是从云端获取的，你可以根据自己的需要修改