主要是借助了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
});
}
})
我这里的图片是从云端获取的,你可以根据自己的需要修改