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!!!

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

点赞加关注,永远不迷路

你可能感兴趣的:(vue3中使用swiper实现纵向滚动)