微信小程序原生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%; 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轮播