vue3中使用swiper实现纵向滚动

前言

废话不啰嗦，上图为敬

image.png

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

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

采坑过程

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

然后查看了配置文件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

代码实现

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

总结

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

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

点赞加关注，永远不迷路