微信小程序原生Swiper组件实现的3d轮播效果,废话不说,直接上效果

实现关键点

  • 设置前后留白 previous-margin=”50px” next-margin=”50px”
  • 设置3d缩放 当前显示的图片transform: scale(1);其他图片transform: scale(0.86);
  • 图片宽高比50% 图片容器height: 0;padding-top: 50%; /宽高比50%/, 然后图片 position:absolute;left:0;top:0;width:100%;height: 100%;
1
2
3
4
5
6
7
8
9
10
11
12
<view class="swiper-container">
<swiper previous-margin="50px" next-margin="50px" indicator-dots="{{indicatorDots}}" circular class="banner-swiper"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperChange">
<block wx:for="{{banners}}" wx:key="index">
<swiper-item>
<view class="swiper-item {{nowIdx==index?'active':''}}" bindtap="handleBannerClick" data-link="{{item.link}}">
<image src="{{item.src}}"></image>
</view>
</swiper-item>
</block>
</swiper>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.banner-swiper {
height: 340rpx;
padding-top: 30rpx;
}
.swiper-item {
width: 100%;
display: block;
transform: scale(0.86);
transition: all .8s ease;
border-radius: 6px;
height: 0;
padding-top: 50%; /*宽高比50%*/
overflow: hidden;
}
.swiper-item image {
position:absolute;
left:0;
top:0;
width:100%;
height: 100%;
}

.swiper-item.active {
transform: scale(1);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Page({
data: {
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 500,
banners: [
{
src: 'https://picsum.photos/750/375?random=1',
link: '//zhuowenzhou.com'
},
{
src: 'https://picsum.photos/750/375?random=2',
link: '//zhuowenzhou.com'
},
{
src: 'https://picsum.photos/750/375?random=3',
link: '//zhuowenzhou.com'
}
],
nowIdx: 0
},
onLoad() {
},

swiperChange: function (e) {
this.setData({
nowIdx: e.detail.current
})
},
})

代码片段地址: 微信小程序3D轮播