異形輪播

前言

移動端越來越多的輪播，是異形輪播了，這裡介紹兩種異形輪播。

效果圖

 

H5

思路

說到輪播，就不得不提一下swiper

 

 

此次就是在Swiper的基礎上，通過css來達到異形輪播的效果。

程式碼

布局就按照官網，正常布局即可，這裡就不多說了，如果正常布局完，沒有反應，看下是不是忘記給每個輪播增加「swiper-slide」類名了。

swiper = new Swiper('.mySwiper', {
  slidesPerView: 2,//設置slider容器能夠同時顯示的slides數量
  spaceBetween: 80,//slide之間的距離（單位px）
  centeredSlides: true,//設定為true時，active slide會居中，而不是默認狀態下的居左。
  observer:true,//修改swiper自己或子元素時，自動初始化swiper
  observeParents:true, //修改swiper的父元素時，自動初始化swiper
  on: {
    //回調函數，swiper從一個slide過渡到另一個slide結束時執行。
    slideChangeTransitionEnd: function(){
     
    },
  },
});

js部分，也是按照官網文檔，配置即可。 我這裡的輪播是中展示一個完整項（1），兩邊各展示一小部分（0.5+0.5），因此slidesPerView 設置為2。centeredSlides必須設置為true,不然首項輪播會居左，而不是居中。spaceBetween，距離按照實際情況，微調即可。

.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",
  },

 

 

Tags:

VirMach 便宜 VPS

QNews

QNews