微信小程序技术点 -- 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;
}
复制代码