小程序立体轮播

<template>
  <view class="container">
    <swiper class="swiper"
            :circular="true"
            :autoplay="true"
            :interval="3000"
            :duration="500"
            :previous-margin="'160rpx'"
            :next-margin="'160rpx'"
            @change="swiperChange"
            @transition="swiperTransition"
            @animationfinish="swiperAnimationfinish">
      <swiper-item v-for="(item, index) in imageList" :key="index">
        <view class="card-wrapper">
          <view class="card-container" :class="{'active': current === index, 'prev': isPrev(index), 'next': isNext(index)}">
            <image :src="item.url" mode="aspectFill" class="card-image" lazy-load :style="{ transform: `translateZ(0)` }"/>
            <!-- <view class="text-overlay" v-if="current === index">
              <text class="quote-text">"感谢领导"</text>
            </view> -->
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<style>
.container {
  padding: 20rpx 0;
}

.swiper {
  height: 280rpx;
}

.card-wrapper {
  perspective: 800rpx;
  height: 100%;
}

.card-container {
  height: 200rpx;
  margin: 20rpx 0rpx;
  position: relative;
  transition: transform 0.3s ease;
  /* border-radius: 20rpx; */
  overflow: hidden;
  transform-style: preserve-3d;
  transform: scale(0.9) rotateY(0deg);
  opacity: 0.6;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
}

.active {
  transform: scale(1) rotateY(0deg) translateZ(50rpx);
  opacity: 1;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.15);
}

.prev {
  transform: scale(0.9) rotateY(25deg) translateX(30rpx);
}

.next {
  transform: scale(0.9) rotateY(-25deg) translateX(-30rpx);
}

.card-image {
  width: 100%;
  height: 100%;
  /* border-radius: 20rpx; */
}

.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(255, 228, 196, 0.8), rgba(255, 218, 185, 0.8));
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
}

.quote-text {
  color: #333;
  font-size: 32rpx;
  font-weight: 500;
}
</style>

<script>
export default {
  data() {
    return {
      current: 0,
      isAnimating: false,
      imageList: [
        { url: 'https://img2.baidu.com/it/u=322190086,731051889&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500' },
        { url: 'https://img2.baidu.com/it/u=322190086,731051889&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500' },
        { url: 'https://img2.baidu.com/it/u=322190086,731051889&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500' },
        { url: 'https://img2.baidu.com/it/u=322190086,731051889&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500' },
      ]
    }
  },
  methods: {
    swiperChange(e) {
      this.current = e.detail.current;
    },
    isPrev(index) {
      if (this.current === 0 && index === this.imageList.length - 1) return true;
      return index === this.current - 1;
    },
    isNext(index) {
      if (this.current === this.imageList.length - 1 && index === 0) return true;
      return index === this.current + 1;
    },
    swiperTransition() {
      this.isAnimating = true;
    },
    swiperAnimationfinish() {
      this.isAnimating = false;
    }
  }
}
</script>