微信小程序技術點 -- 3D輪播圖

預覽效果

代碼

swiper.js代碼

Page({
  data: {
    imgUrls: [
      'http://chuantu.biz/t6/328/1528961604x-1376440252.png',
      'http://chuantu.biz/t6/328/1528961633x-1376440252.png',
      'http://chuantu.biz/t6/328/1528961652x-1376440252.png'
    ],
    swiperIndex: 1
  },
  swiperChange(e) {
    this.setData({
      swiperIndex: e.detail.current
    })
  }
})
複製代碼

swiper.wxml代碼

<view class='page-hb'>
  <swiper indicator-dots="{{true}}" autoplay="{{false}}" previous-margin="{{'188rpx'}}" next-margin="{{'188rpx'}}" bindchange="swiperChange" current='1'>
    <block wx:for="{{imgUrls}}" wx:key="{{index}}">
      <swiper-item class="{{swiperIndex == index ? 'active' : ''}}">
        <image src="{{item}}" class="slide-image {{swiperIndex == index ? 'active' : ''}}"/>
      </swiper-item>
    </block>
  </swiper>
</view>
複製代碼

swiper.wxss代碼

/**我這裏爲iPhone6的設計圖*/
swiper{
  width: 750rpx;
  height: 500rpx;
}
swiper-item{
  padding-top: 100rpx;
}
/**這裏圖片的尺寸須要動態設置，margin-left須要設置爲width的一半的負值*/
.page-hb image{
  width: 280rpx;
  height: 280rpx;
  position: absolute;
  left: 50%;
  margin-left: -140rpx; 
}
.page-hb image.active{
  transform: scale(1.29);
  transition:all .2s ease-in 0s;
}
複製代碼