在Vue3这种使用swiperjs

这篇内容是在有道云旧笔记基础上重新整理的 Vue/Vite 工程实践 笔记。原始记录偏碎片化，这里补充了使用场景、阅读顺序和落地时需要注意的边界，方便以后在项目里快速复用。

适用场景 ​

• Vue/Vite 项目中遇到配置、组件封装、构建或运行时问题时，作为排查入口。
• 需要把一次性调试经验沉淀成团队内可复用的前端工程实践。
• 迁移旧项目或升级依赖时，用来对照检查环境变量、插件和组件行为差异。

核心要点 ​

• 正文以代码或命令片段为主，阅读时建议先确认目标问题，再挑选对应片段验证。
• 保留了 1 段可直接参考的代码或命令，主要涉及 vue，复制前需要按当前项目路径、版本和变量名做调整。

<template>
  <div class="single-page">
    <swiper
      class="single-swiper-page"
      direction="vertical"
      parallax
      :modules="modules"
      navigation
      :allowSlidePrev="swiperConf.allowSlidePrev"
      :allowSlideNext="swiperConf.allowSlideNext"
      :pagination="{ clickable: true }"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
    >
      <swiper-slide>
        Slide 1
        <div class="btn" @click="handleStartOpen">立即开启</div>
      </swiper-slide>
      <swiper-slide>
        <div class="title" data-swiper-parallax="-100">从右边100px开始进入</div>
        Slide 2
        <div data-swiper-parallax="0" data-swiper-parallax-opacity="0.1" >透明度变化</div>
              <div data-swiper-parallax-scale="0.55" >缩放变化</div>
      </swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
    </swiper>
  </div>
</template>
<script setup>
import { onMounted, ref, nextTick  } from 'vue'
// import Swiper core and required modules
import {Pagination } from "swiper"

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue"

// Import Swiper styles
import "swiper/swiper.scss"
const modules = ref([Pagination])
const swiperRef = ref(null)
const swiperConf = ref({
  allowSlideNext: true,
  allowSlidePrev: true,
  length: 0
})
const onSwiper = (swiper) => {
  swiperRef.value = swiper
}
const onSlideChange = (change) => {
  isAllowSlidePageTurning(change)
  console.log('%c [ slide change ]-51', 'font-size:14px; background:#cf222e; color:#fff;', change.activeIndex)
}

const isAllowSlidePageTurning = ({ activeIndex, slides }) => {
  if (activeIndex === 0) {
    swiperConf.value.allowSlideNext = false
    swiperConf.value.allowSlidePrev = false
  } else if (activeIndex && activeIndex === slides.length - 1) {
    swiperConf.value.allowSlideNext = false
    swiperConf.value.allowSlidePrev = true
  } else {
    swiperConf.value.allowSlideNext = true
    swiperConf.value.allowSlidePrev = true
  }
}

const handleStartOpen = () => {

  console.log('%c [ handleStartOpen ]-77', 'font-size:14px; background:#cf222e; color:#fff;',swiperRef.value)
  if (swiperRef.value) {
    swiperConf.value.allowSlideNext = true
    nextTick(() => swiperRef.value.slideNext())
  }
}

onMounted(() => {
  if (swiperRef.value) {
    const { activeIndex, slides } = swiperRef.value
    isAllowSlidePageTurning(swiperRef.value)
    swiperConf.value.length = slides.length
    console.log('%c [ swiperRef.value ]-56', 'font-size:14px; background:#cf222e; color:#fff;', activeIndex, slides.length)
  }
})
</script>
<style lang="scss" scoped>
.single-page {
  width: 100vw;
  height: 100vh;
  .single-swiper-page:deep() {
    height: 100%;
    width: 100%;
  }
}

.swiper-slide {
  height: 300px;
  width: 100vw;
  line-height: 300px;
  font-size: 30px;
  text-align: center;
  background-color: pink;
}
</style>

实践检查清单 ​

• 先确认 Vue、Vite、Node、包管理器版本，再判断示例是否需要按当前工程结构调整。
• 涉及构建或插件配置时，建议同时验证开发环境和生产构建结果。
• 涉及 UI 或浏览器行为时，至少在桌面端和移动端各验证一次关键路径。

复盘小结 ​

这篇笔记更适合作为问题排查或方案落地前的速查材料。后续如果在真实项目中再次遇到同类问题，可以继续把具体版本、报错信息、最终取舍和验证结果补到对应小节里，让它从代码片段逐步沉淀成完整方案。