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