Swiper实现保持卡片悬停位置居中

前言

Swiper现在其实还是有一定问题的，但是可以说已经风靡小程序，在小程序中随处可见这种设计效果，吐槽归吐槽，还是要用起来

看代码

• wxml代码

<view class='college-container'>
  <swiper indicator-dots="{{false}}" autoplay="{{false}}" previous-margin='80rpx' next-margin='80rpx'>
    <block wx:for="{{imgUrls}}" wx:for-item='item' wx:key=''>
      <swiper-item>
        <view class="shuffing-item">
          <image src="{{item.url}}"></image>
        </view>
      </swiper-item>
    </block>
  </swiper>
</view>

• wxss代码

.college-container{
  display: flex;
  flex-direction: column;
}

swiper{
  height:500rpx;
  margin:20rpx 0rpx;
}

.shuffing-item{
  position: absolute;
  width:90%;
  height:500rpx;
  left: 50%;
  right:50%;
  transform: translateX(-50%) translateY(-50%);
  transition: all 0.3s;
}
.shuffing-item-next{
  width:85%;
  height:85%;
  transform:translateX(-100%) translateY(-50%);
  transition: all 0.3s;
}
.shuffing-item-preo{
  width:85%;
  height:85%;
  transform:translateX(40%) translateY(-50%);
  transition: all 0.3s;
}
.shuffing-item>image{
  width:100%;
  height:100%;
}

• 数据源

data: {
    imgUrls: [
      {
        url: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1091628847,41930541&fm=26&gp=0.jpg',
        isChange: 1,
      },
      {
        url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=597216490,672508208&fm=26&gp=0.jpg',
        isChange: 2,
      },
      {
        url: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3173577287,1130280921&fm=26&gp=0.jpg',
        isChange: 3,
      },
      {
        url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=858959453,1988929777&fm=26&gp=0.jpg',
        isChange: 4,
      },
      {
        url: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3797481993,1929347741&fm=26&gp=0.jpg',
        isChange: 5,
      }
    ]
  }

实现效果附图一张（忽略上方黑边）

image.png