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

实现方式二

看代码

• wxml代码

<view class='college-container'>
  <swiper class="swiper-block" autoplay="{{true}}" circular='{{true}}' bindchange="swiperChange" previous-margin="80rpx" next-margin="80rpx" current="0">
    <block wx:for="{{imgUrls}}" wx:index="{{index}}" wx:key='index'>
      <swiper-item class="swiper-item">
        <image mode="aspectFill" src="{{item.url}}" class="slide-image {{currentIndex == index ? 'active' : ''}}" />
      </swiper-item>
    </block>
  </swiper>
</view>

• wxss代码

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

.swiper-block {
  height: 480rpx;
  width: 100%;
}

swiper-item{
  height: 90% !important;
}

.swiper-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  overflow: unset;
}

.slide-image {
  height: 320rpx;
  width: 520rpx;
  border-radius: 9rpx;
  box-shadow: 0px 0px 30rpx rgba(0, 0, 0, 0.2);
  margin: 0rpx 30rpx;
  z-index: 1;
}

.active {
  transform: scale(1.14);
  transition: all 0.2s ease-in 0s;
  z-index: 20;
}

• page的js代码

data: {
    currentIndex:0,
    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,
      }
    ]
  },

  swiperChange: function (e) {
    this.setData({
      currentIndex: e.detail.current
    })
  },

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