swiper组件实现当前中间图片变大，其余图片变小

1.wxml文件中
<swiper bindchange="change" previous-margin="50rpx" next-margin="50rpx" circular>
<block wx:for="{{imgUrls}}" wx:key="{{index}}">
<swiper-item>
<view class='cardItem {{index == current?"active":""}}'>
<image src="{{item.url}}" class="slide-image {{}}" width="355" height="150" />
</view>
</swiper-item>
</block>
</swiper>

2.js文件中
Page({
/**

• 页面的初始数据
  */
  data: {
  imgUrls: [
  {
  url: 'http://image-test.geeme.cn/images/932cdb72aa3e489e87ddbc1836cde1bb',
  value:0
  },{
  url:'http://image-test.geeme.cn/images/88c7706587b04439a03de076aa415191!style146',
  value:1
  },{
  url: 'http://image-test.geeme.cn/images/0666780aca0f4701b5570cf7abc71857!style146',
  value: 2
  }, {
  url: 'http://image-test.geeme.cn/images/011e8aea36bc457a9ec57d31eee4ea8f',
  value: 3
  }
  ],
  current:0
  },

/**

• 轮播图change事件
  /
  change(e){
  let current = e.detail.current;
  console.log(current)
  this.setData({
  current:current
  })
  }
  })
  3.wxss中
  / 卡片列表 */
  .cardList{

}
swiper{
height: 400rpx;
margin-bottom: 38rpx;
margin-top: 32rpx;
}

.cardItem{
width: 100%;
height: 100%;
padding: 60rpx 0;
transition: all .625s ease;
}

.cardItem.active{
padding: 10rpx;
}

image{
width: 98%;
height: 100%;
display: block;
margin:0 auto;
border-radius: 28rpx;
}

//总的思想就是利用当前的current与data数据中的value作比较