小程序立体轮播

javascript 复制代码
<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>
相关推荐
游戏开发爱好者829 分钟前
FTP 抓包分析实战,命令、被动主动模式要点、FTPS 与 SFTP 区别及真机取证流程
运维·服务器·网络·ios·小程序·uni-app·iphone
漂流瓶jz29 分钟前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史
前端·javascript·前端工程化
samroom30 分钟前
iframe实战:跨域通信与安全隔离
前端·安全
fury_1231 小时前
vue3:数组的.includes方法怎么使用
前端·javascript·vue.js
weixin_405023371 小时前
包资源管理器NPM 使用
前端·npm·node.js
说私域1 小时前
基于开源AI大模型、AI智能名片与S2B2C商城小程序的购物中心精准零售数据架构研究
人工智能·小程序·开源
宁&沉沦1 小时前
Cursor 科技感的登录页面提示词
前端·javascript·vue.js
Dragonir1 小时前
React+Three.js 实现 Apple 2025 热成像 logo
前端·javascript·html·three.js·页面特效
说私域2 小时前
开源链动2+1模式、AI智能名片与S2B2C商城小程序:社群经济的数字化重构路径
人工智能·小程序·开源