微信小程序層疊輪播圖 vs 移動端輪播圖

一開始看到設計稿的這個層疊效果，不是傳統的小程序輪播圖，本來想自定義寫一個輪播圖，但發現用小程序的swiper組件仍能實現，swiper的previous-margin前邊距和next-margin后邊距，可用於露出前/后一項的一小部分

為了讓大家能看到swiper、swiper-item和slide-image代表的哪一塊地方，我設置swiper背景色為藍色，swiper-item背景色為灰色並有黑色邊框，slide-image為橙色圖片

swiper:滑塊視圖容器，不會滑動

swiper-item:滑塊，除去前后邊距30+30=60px的最大寬度100%

slide-image:絕對定位slide-image，水平居中在swiper-slide區域。Slide-image transform:scale(1.1)，雖然放大，但不會超過swiper-item區域

wxml:

  <view>
  <swiper autoplay="true" previous-margin="30px" next-margin="30px" bindchange="swiperChange">
    <block wx:for="{{cardSwiper}}" wx:key="{{index}}">
      <swiper-item>
         <image src="{{item.image}}" class="slide-image {{swiperIndex == index ? 'active' : ''}}"/> 
      </swiper-item>
    </block>
  </swiper>
</view>

wxss:

swiper{ width: 100%; height: 360rpx; background: #2899FF;
} swiper-item{ padding-top: 30rpx; background: #666666; border: 1rpx solid #000000;
} .slide-image{ width: 575rpx; height: 300rpx; position: absolute; left: 50%; margin-left: -287rpx;
} .slide-image.active{ transform: scale(1.1); transition:all .2s ease-in 0s;
} 

js:

Page({ data: { cardSwiper: [ { image: '../../images/card.png' }, { image: '../../images/card2.png' }, { image: '../../images/card.png' }, { image: '../../images/card2.png' } ], swiperIndex: 0 }, swiperChange(e) { this.setData({ swiperIndex: e.detail.current }) } })

 

而移動端的這個輪播圖當然可以用swiper這個強大的插件啦

露出前/后一項的一小部分，用slidesPerView這個參數，設置為1.5

還有一個效果是上面儲值卡的滑動，會自動匹配下面儲值卡的金額，用到回調函數tranitionStart，過渡開始時觸發，能獲取到現在當前的儲值卡是第幾個activeIndex

        var swiper = new Swiper('.swiper-container', { slidesPerView: '1.5', centeredSlides: true, spaceBetween: 50, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, on:{ transitionStart: function(){ var activeIndex=this.activeIndex; $('.valueList em').removeClass('cur'); $('.valueList em').eq(activeIndex).addClass('cur'); } }, })