微信小程序—常用的四种轮播图（间距、顶层、3D翻转、旋转木马）

摘要

微信小程序轮播图官方提供的swiper组件已经可以满足大部分轮播图效果，如间距轮播、顶层轮播，可仍有一些像3D翻转、旋转木马等效果需要通过监听滑动动作、利用动画去自定义实现，现就此四种效果提供解决方案及代码参考。

效果图

体验

体验路径：自定义系列>轮播图

代码

3D翻转轮播图与旋转木马轮播图代码

资源文件中包含封装的组件及使用demo，3d组件支持横向、竖向以及任意方向旋转。重要的事情说三遍：

源码免积分下载点击下载
源码免积分下载点击下载
源码免积分下载点击下载

间距轮播图与顶层轮播图代码

js部分

Page({
 data: {
    currentIndex: 0,
    currentIndex1: 0,
    currentIndex2: 0,
    imgList: [{
      img: "cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/meinv/000059.jpg"
    },
    {
      img: "cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/meinv/000064h.jpg"
    },
    {
      img: "cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/meinv/07300256.jpg"
    }
    ],
    imgList1: [{
      img: "cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/meinv/15511818.jpg"
    },
      {
        img: "cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/meinv/000063h.jpg"
      },
      {
        img: "cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/meinv/15510230.jpg"
      }
    ],
  },

  changeSwiper: function (e) {
    this.setData({
      currentIndex: e.detail.current
    })
  },
  changeSwiper1: function (e) {
    this.setData({
      currentIndex1: e.detail.current
    })
  },
})

wxml部分

<view class='container'>
  <view class="view-row" style="color:#aaa;font-size:36rpx;margin:30rpx;border-bottom:1rpx solid #aaa;padding:10rpx">原生swiper实现</view>
  <scroll-view style="display:flex;width:100%" scroll-y>
    <view class="container">
      <view style="font-size:32rpx;color:#aaa">间距轮播图</view>
      <swiper style="width:100%;height:360rpx;margin-top:50rpx;" bindchange="changeSwiper" previous-margin="90rpx" next-margin="90rpx">
        <block wx:for="{{imgList}}" wx:key>
          <swiper-item class="swiperItem">
            <image mode="aspectFill" src='{{item.img}}' class="imageItem {{currentIndex == index ? 'active': ''}}"> </image>
          </swiper-item>
        </block>
      </swiper>
      <view style="font-size:32rpx;color:#aaa;margin-top:50rpx">顶层轮播图</view>
      <swiper style="display: flex;flex-direction: column;justify-content: center;align-items: center;overflow:unset;width:100%;height:360rpx;margin-top:50rpx;" bindchange="changeSwiper1" previous-margin="150rpx" next-margin="150rpx">
        <block wx:for="{{imgList1}}" wx:key>
          <swiper-item class=" {{currentIndex1 == index ? 'swiperItemActive1': 'swiperItem1'}}">
            <image mode="aspectFill" src='{{item.img}}' class="imageItem1 {{currentIndex1 == index ? 'active1': ''}}"> </image>
          </swiper-item>
        </block>
      </swiper>
    </view>
  </scroll-view>
</view>

wxss部分

page {
  background: #f6f6f6;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.swiperItem {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: unset;
}

.imageItem {
  height: 300rpx;
  width: 510rpx;
  border-radius: 10rpx;
  margin: 30rpx 0rpx;
  z-index: 1;
}

.active {
  transform: scale(1.14);
  transition: all 0.2s ease-in 0s;
  z-index: 2;
}

.swiperItem1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: unset;
  z-index: 0.5;
}

.swiperItemActive1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: unset;
  z-index: 1;
}

.imageItem1 {
  height: 300rpx;
  width: 510rpx;
  border-radius: 10rpx;
  margin: 30rpx 0rpx;
  /* opacity: 0.5; */
}

.active1 {
  transform: scale(1.14);
  transition: all 0.2s ease-in 0s;
  /* opacity: 1; */
}

.box {
  width: 200rpx;
  height: 300rpx;
  margin: 50px auto;
  border-radius: 10rpx;
  perspective: 200;
  -webkit-perspective: 200;
  transform-style: preserve-3d;
}

.elem {
  width: 100%;
  height: 100%;
  transform: rotateY(30deg);
}

程序员不易，鼓励一下 !