vue3 +uniapp+ swiper8.4.7 适配移动端 轮播效果 3d叠加 横向循环焦点

 首先是下载swiper  我用的是8.4.7版本 

npm install swiper --save

然后页面引入

import { Swiper, SwiperSlide } from "swiper/vue";

// 这是根据轮播功能对应添加配置

import SwiperCore, {

  Autoplay,

  EffectCoverflow,

  EffectCube,

  EffectCreative,

  Navigation,

} from "swiper";

import "swiper/swiper-bundle.css";

import "swiper/swiper.min.css";

还有修改swiper-slide样式

progressFn 里面是计算图片不同位置的图片缩放比和偏移位置和透明度不同，大家根据自己需求调整

我直接展示代码吧 肯定能看明白

<template>
  <view class="scratch">
    <view class="swiper-content">
      <Swiper
        :slides-per-view="1"
        :loop="true"
        :watch-slides-progress="true"
        :centered-slides="true"
        :modules="modules"
        class="mySwiper"
        :looped-slides="5"
        style="width: 100%; height: 100%"
        @swiper="onSwiper"
        @progress="progressFn"
        @setTransition="setTransition"
      >
        <SwiperSlide v-for="(item, index) in list" :key="item.id">
          <img
            :src="item.src"
            alt=""
            style="width: 260px; height: 100%; object-fit: contain"
            @click="imgBtn"
          />
        </SwiperSlide>
      </Swiper>
    </view>

    <view class="bot"> <view class="btn">Chia sẻ ngay</view></view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, watch, onMounted } from "vue";
import { showToast } from "vant";
import { Swiper, SwiperSlide } from "swiper/vue";
import SwiperCore, {
  Autoplay,
  EffectCoverflow,
  EffectCube,
  EffectCreative,
  Navigation,
} from "swiper";
import "swiper/swiper-bundle.css";
import "swiper/swiper.min.css";
// 配置Swiper以包含需要的组件
SwiperCore.use([
  Autoplay,
  EffectCoverflow,
  EffectCube,
  EffectCreative,
  Navigation,
  EffectCoverflow,
]);
const deviceWidth = ref(0);

onMounted(() => {
  // 获取设备宽度
  deviceWidth.value = window.innerWidth;

  // 添加事件监听，以响应窗口大小变化
  window.addEventListener("resize", updateWidth);
});
const updateWidth = () => {
  deviceWidth.value = window.innerWidth;
};
const list = [
  {
    src: new URL("../../static/scratch-off/banner1.png", import.meta.url).href,
    id: 0,
  },
  {
    src: new URL("../../static/scratch-off/banner2.png", import.meta.url).href,
    id: 1,
  },
  {
    src: new URL("../../static/scratch-off/banner3.png", import.meta.url).href,
    id: 2,
  },
  {
    src: new URL("../../static/scratch-off/banner4.png", import.meta.url).href,
    id: 3,
  },
  {
    src: new URL("../../static/scratch-off/banner5.png", import.meta.url).href,
    id: 4,
  },
];

const modules = ref([Navigation]);

const onSwiper = (swiper: object) => {
  console.log(swiper);
};
const imgBtn = () => {
  showToast("功能尚未开发，敬请期待");
};
const progressFn = function (swiper: any) {
  const slides = swiper.slides;
  for (let i = 0; i < slides.length; i++) {
    const slide = slides.eq(i);
    const slideProgress = slides[i].progress;
    let modify = 1;
    if (Math.abs(slideProgress) > 3) {
      modify = (Math.abs(slideProgress) + 1) * 0.56 + 1;
    }
    // 根据设备宽度计算图片位置
    const translate = slideProgress * modify * (deviceWidth.value - 50) + "px"; 
    const scale = 1 - Math.abs(slideProgress) / 10;
    const zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
    slide.transform("translateX(" + translate + ") scale(" + scale + ")");
    slide.css("zIndex", zIndex);
    slide.css("opacity", 1);
    if (Math.abs(slideProgress) > 2) {
      slide.css("opacity", 0);
    }
  }
};

const setTransition = function (swiper: any, transition: any) {
  for (let i = 0; i < swiper.slides.length; i++) {
    const slide = swiper.slides.eq(i);
    slide.transition(transition);
  }
};
</script>

<style lang="scss" scoped>
.scratch {
  width: 100%;
  height: 1250px;
  background-image: url("../../static/scratch-off/bg.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  justify-content: center;
  .bot {
    width: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 62px;
    left: 0;
    .btn {
      width: 550px;
      height: 96px;
      font-weight: bold;
      font-size: 32px;
      color: #5f3223;
      background: linear-gradient(90deg, #ece6c6 0%, #f0c993 100%);
      border-radius: 48px;
      line-height: 96px;
      text-align: center;
    }
  }
  .swiper-content {
    width: 100%;
    height: 800px;
    padding-top: 240px;
  }
}
:deep(.swiper-slide) {
  z-index: 65;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  transition: 300ms;
  transform: scale(0.8);
}

</style>