vue3中使用swiper实现纵向滚动

前言

废话不啰嗦，上图为敬

image.png

做过前端开发的同学，开发中的banner轮播、文字跑马灯、旋转木马等实现经常遇到，本着不重复造轮子的原则，上图这个开源swiper组件库大家应该都使用过，github星级之高，应用之广泛，支持框架之多(angular、react、vue、svete等应有尽有)，对比其他无出其右。

缺点：英文文档简陋至极，中文示例文档是真的烂，我只是想实现一个垂直滚动（也叫纵向滚动）效果，竟然需要到处查资料，到处采坑，相当不人性化。

采坑过程

因为我是vite构建的v3项目，使用官方示例Demo，npm install之后运行，上来就报错

<template>
  <main>
    <swiper
      @swiper="onSwiper"
      :slidesPerView="3"
      :spaceBetween="50"
      navigation
      :scrollbar="{ draggable: true }"
      :pagination="{ clickable: true }"
      :modules="modules"
    >
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide>
      <swiper-slide>Slide 9</swiper-slide>
      <swiper-slide>Slide 10</swiper-slide>
    </swiper>
  </main>
</template>
<script>
// eslint-disable-next-line
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
// eslint-disable-next-line
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js';

export default {
  components: {
    Swiper,
    SwiperSlide,
  },

  setup() {
    const onSwiper = (swiper) => {
      window.swiper = swiper;
    };
    return {
      modules: [Navigation, Pagination, Scrollbar, A11y],
      onSwiper,
    };
  },
};
</script>

然后查看了配置文件vite.config.js 添加 resolve.alias，如下

import path from 'path';
import vue from '@vitejs/plugin-vue';

export default {
  plugins: [vue()],
  resolve: {
    alias: {
      swiper: path.resolve(__dirname, '../../dist/'),
    },
  },
};

接着我还需要拷贝一份dist到我项目中，想想哪里不对，我肯定是被文档带偏了，我明明是npm 引入库的方式，这是要我马路上扛着自行车奔跑嘛不是，放弃。

再回到官方文档，找到了API方法

image.png

试了不行，打印swiper传参params等参数，凡是能改direction属性的，都试了，滚动一页，然后其他页面不见了，再次放弃。

永不言弃

放弃了查看官方文档，跑去翻墙看博客，似乎发现了惊喜，然后一顿操作，垂直滚动的效果有了，但是滚动了一页就再也不能滚动了是什么意思。

然后继续回到swiper官方文档，思考着是不是需要JS创建swiper才行能，继续尝试，无果。

然后去github上找找灵感，发现了哪位大佬写的 vue-awesome-swiper，安装继续尝试，不行，发现极少维护了，也没有对swiper 7.3.2做支持，放弃。

继续翻墙，再次发现了什么，一评论区的小菜给 swiper ，swiper-slide 加了固定宽度，就这样，有了！！！

感谢小菜，远离大佬，珍爱生命。

image.png

代码实现

<template>
  <!-- 轮播滚动 -->
  <swiper
    :modules="[Mousewheel]"
    :mousewheel="{ releaseOnEdges: true }"
    :direction="'vertical'"
    class="my-swiper"
  >
    <swiper-slide style="height: 100vh">
      <GuideGallery />
    </swiper-slide>
    <swiper-slide style="height: 100vh">
      <GuideExplore />
    </swiper-slide>
    <swiper-slide style="height: 100vh">
      <GuidePetalmaps />
    </swiper-slide>
    <swiper-slide style="height: 100vh" v-slot="{ isActive }">
      <GuideDynamic :isActive="isActive" />
    </swiper-slide>
    <swiper-slide style="height: 100vh" v-slot="{ isActive }">
      <GuidePrefer :isActive="isActive" />
    </swiper-slide>
    <swiper-slide style="height: 100vh" v-slot="{ isActive }">
      <GuideMultiRoute :isActive="isActive" />
    </swiper-slide>
    <swiper-slide style="height: 100vh" v-slot="{ isActive }">
      <GuideAlongSearch :isActive="isActive" />
    </swiper-slide>
    <swiper-slide style="height: 100vh" v-slot="{ isActive }">
      <GuideNearby :isActive="isActive" />
    </swiper-slide>
  </swiper>

  <!-- 暂时加点颜色，有被覆盖的组件，都要加上背景色 -->
  <section style="background-color: aqua">
    <!--隐私-->
    <page-privacy></page-privacy>
    <!--下载-->
    <page-download></page-download>
    <!--底部申明-->
    <Footer />
  </section>
</template>

<style scoped>
.my-swiper {
  height: 100vh;
}
</style>

到此，距离解决问题已经过去了12个小时，期间茶水不思，头发掉了若干。

总结

大家看到了，我的每个swiper-slide 中的自定义组件，其实很复杂，嵌入了各种视频、图片、文字、弹窗甚至是地图，不是简单的轮播几张图片或者文字，所以，找问题先分析应用场景，思索 => 脑海里有了方案 => action！！！

打工人打工魂，十年打工人上人。

点赞加关注，永远不迷路