異形輪播

.mySwiper .swiper-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    transition: 300ms;
    transform: scale(0.8);
    opacity: 0.5;
    margin-top: 0.1rem;
}

/* 當前顯示 */
.mySwiper .swiper-slide-active,
.mySwiper .swiper-slide-duplicate-active {
    opacity: 1;
    transform: scale(1);
    margin-top: 0;
}
/* 當前顯示前後 */
.mySwiper .swiper-slide-prev,
.mySwiper .swiper-slide-next{
    transform: scale(0.8)!important;
    opacity: 0.5;
    margin-top: 0.1rem;
}

css部分，設定swiper-slide預設為縮放0.8，透明度0.5；當前顯示為scale(1)，透明度1；

前一項和後一項為縮放0.8，透明度0.5；這樣效果就是，當前顯示項完整，兩邊比當前顯示項小且半透明。

小程式

小程式實現輪播都是使用自帶的 swiper ，這裡也是通過swiper實現異形輪播。

主要是這三個引數：

previous-margin：前邊距，可用於露出前一項的一小部分，接受 px 和 rpx 值；

next-margin：後邊距，可用於露出後一項的一小部分，接受 px 和 rpx 值；

current：當前所在滑塊的 index；

思路

設定 previous-margin 和 next-margin ，先實現異形輪播佈局（中間顯示完整的，兩邊各顯示3/1）。設定樣式時，預設transform: scale(0.8);opacity: 0.5;縮小到0.8，透明度0.5；然後根據current判斷哪個是當前顯示項，新增類名rotationliscale，使之transform: scale(1);opacity: 1;正常顯示。

以上就是實現了小程式異形輪播，關於 previous-margin 和 next-margin 設定多少畫素合適，可根據實際情況微調；

程式碼如下

swiper的各類引數使用可參照 官網文件

<view class="rotation">
                <view class="mySwiper">
                    <view class="rotationlist">
                        <swiper
                            class="rotationswiper"
                            autoplay="{{ViewModel.cardSwiper.autoplay}}" 
                            circular="{{ViewModel.cardSwiper.circular}}" 
                            duration="{{ViewModel.cardSwiper.duration}}"
                            snap-to-edge="{{ViewModel.cardSwiper.edge}}"
                            previous-margin="{{ViewModel.cardSwiper.previous}}"
                            next-margin="{{ViewModel.cardSwiper.next}}"
                            current="{{ViewModel.current}}"
                            bindchange="bindchange"
                        >
                        <block wx:for="{{ViewModel.cardList}}" wx:key="index">
                          <swiper-item>
                              <view class="rotationli {{ViewModel.current==index?'rotationliscale':''}}">
                                <image class="rotationimg" src="{{host}}rotation{{item.type}}.png"/>
                            </view>
                          </swiper-item>
                        </block>
                      </swiper>
                    </view>
                </view>
            </view>

.rotation {
    box-sizing: border-box;
    width: 750rpx;
    height: 570rpx;
    position: absolute;
    top: 401rpx;
    left: 0;
    overflow: hidden
}

.mySwiper {
    box-sizing: border-box;
    width: 750rpx
}

.rotationlist {
    box-sizing: border-box;
    width: 100%;
    height: 575rpx
}
.rotationswiper{
    width: 100%;
    height: 100%;
    line-height: 0;
}

.rotationli {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.8);
    opacity: 0.5;
}
.rotationliscale{
    transform: scale(1);
    opacity: 1;
}

  cardSwiper: {
    autoplay: false, //是否自動切換    
    circular: false, //是否採用銜接滑動    
    duration: 200, //滑動動畫時長
    edge: false,
    previous: "140rpx",
    next: "140rpx",
  },