小程序立体轮播

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>
相关推荐
2501_915106321 天前
iOS 26 APP 性能测试实战攻略:多工具组合辅助方案
android·macos·ios·小程序·uni-app·cocoa·iphone
kyle~1 天前
C++--- override 关键字 强制编译器验证当前函数是否重写基类的虚函数
java·前端·c++
Light601 天前
像素退场,曲线登场:现代响应式 CSS 全家桶 | 领码课堂
前端·css·响应式设计·css函数·布局系统·相对单位·设计令牌
爱生活的苏苏1 天前
elementUI 表单验证-联动型校验
前端·javascript·elementui
巨神峰SEO1 天前
支付宝小程序 SEO 实战:鲜花送达类小程序抢占搜索流量指南
小程序·支付宝小程序排名优化·支付宝小程序seo·支付宝小程序排名·支付宝优化
凉辰1 天前
微信小程序uni.request 返回值存在精度丢失问题
微信小程序·小程序
一只小风华~1 天前
Vue Router 路由元信息(meta)详解
前端·javascript·vue.js
*且听风吟1 天前
html 实现鼠标滑动点亮横轴
前端·javascript·html
李慕婉学姐1 天前
【开题答辩过程】以《基于微信小程序教学评价平台的设计与实现》为例,不会开题答辩的可以进来看看
微信小程序·小程序
计算机学姐1 天前
基于微信小程序的垃圾分类管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis