微信小程序使用微信组件swiper实现中间大图另外两张小图

效果实现思路

1. 使用微信组件swiper
2. swiper组件api previous-margin、next-margin

属性名	类型	默认值	类型说明
previous-margin	String	“0px”	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
next-margin	String	“0px”	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值

3. 设置当前图片放大（设置css样式）
   下面直接贴上代码

banner.wxml

  <swiper  autoplay interval="{{interval}}" circular previous-margin="{{leftMargin}}" next-margin="{{rightMargin}}" bindchange="handleChange">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" class="slide-image {{currentIndex == index ? 'active': ''}}"/>
      </swiper-item>
    </block>
  </swiper>

banner.wxss

.slide-image {
  position: absolute;
  height: 225rpx;
  width: 570rpx;
  border-radius: 15rpx;
  z-index: 5;
  opacity: 0.7;
  top: 13%;
  margin: 0 20rpx;
}

swiper {
  height: 430rpx;
}

.active {
  opacity: 1;
  z-index: 10;
  height: 280rpx;
  width: 570rpx;
  top: 7%;
  transition: all 0.2s ease-in 0s;
}

banner.js

Page({
  data: {
    imgUrls: [
      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545220114942&di=3bf52981626b3cc290dd684df29e714c&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F8b82b9014a90f6038de2556a3212b31bb051ed4a.jpg',
      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545220114942&di=3bf52981626b3cc290dd684df29e714c&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F8b82b9014a90f6038de2556a3212b31bb051ed4a.jpg',
      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545220114942&di=3bf52981626b3cc290dd684df29e714c&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F8b82b9014a90f6038de2556a3212b31bb051ed4a.jpg'
    ],
    interval: 5000,
    duration: 1000,
    circular: true,
    leftMargin: '80rpx',
    rightMargin: '80rpx',
    currentIndex: 0
  },
  handleChange: function (e) {
    this.setData({
      currentIndex: e.detail.current
    })
  },
})