Swiper踩坑经历

最后更新时间：2023年12月04日

背景

有个移动端项目用了Vant组件库进行开发，其中有个需求要实现一个轮播图的效果，但是Vant组件库自带的轮播图组件功能有限，只能实现一些很基础的效果，而且在其基础上只进行一些样式的调整也难以实现想要的效果，所以就考虑使用其它的插件。
Swiper是很著名的一个用于轮播图及移动动画的插件，面向手机、平板电脑等移动终端，并且开源免费。在网上进行搜索之后发现大多数的用法都是用原生js方式所实现的，并且Swiper官方在7版本之前也是没有适配Vue的，因此为了在Vue中能以组件方式进行调用Swiper，还诞生了一个12.7k star的第三方开源项目vue-awesome-swiper。另外在Vant的官网上也提到，如果需要更复杂的轮播效果，可以使用vue-awesome-swiper，因此就开始了一系列的踩坑之旅。

遇到的问题（坑）

安装模块

点击进入vue-awesome-swiper的github主页，就可看到黄色的提示以及官方介绍，说是由于Swiper官网对vue的支持，这个库已经弃用了，当时看到这个提示的时候并没有细想（确实是有点急），看了如下的版本兼容性列表后发现 vue-awesome-swiper是支持项目所使用的Vue2的，于是就想着那就用它了。

点击进去vue-awesome-swiper@4.1.1的github主页之后，看到了官方给的安装指令，心想真好，一顿CV执行了命令yarn add swiper vue-awesome-swiper，甚至都没有多看一眼但是很顺利安装上了vue-awesome-swiper。

组件调用

根据官方的引导进入了示例网站Examples (Vue2)，在里面找到了一个与想要效果类似的示例，并将代码复制到项目中测试运行，首先是导入组件：

import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

然后IDE报错，说是swiper.css找不到，其实这时就应该有所察觉的，但当时就想着怎么官网实例都有问题呢，可真不靠谱。在晚上一顿搜索说是，Swiper不同的版本swiper.css的位置可能是不一样的（这会竟然还没意识到Swiper的版本有问题），然后修改了正确的地址，没报错了。

<template>
  <swiper class="swiper" :options="swiperOption">
    <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>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>
<script>
  export default {
    data() {
      return {
        swiperOption: {
          slidesPerView: 3,
          spaceBetween: 30,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          }
        }
      }
    }
  }
</script>

接着把上面的代码复制进行了项目中，也成功运行了，并且没有任何报错，但是出来的效果没有和官网效果图一样，代码中slidesPerView设置3含义是容器中同时会出现3个swiper-slide，如下图所示。但实际上运行出的效果只有一个swiper-slide，之后又对比了与官方代码的区别，并没有什么不同，这就导致对官方代码暂时失去了信任。

初步实现效果

于是就在网上搜索了vue-awesome-swiper的相关用法，最终找到了能实现类似效果的一篇文章，那篇文章中的代码和官方代码相比，除了swiperOption配置外，最大的区别就是添加了一些自定义的css样式，使其实现了想要的效果。但是一个最大的问题就是分页器不显示，配置中的pagination属性就描述了分页器的相关信息，最初以为是配置写错了，但是经过一番检查后还是没发现问题，而且还用了旧版本的pagination写法也还是不行。
通过Chrome的调试工具可发现，模板中写的pagination的div里面是空的，但是官方运行的实例里面是有元素的，也就是说pagination根本就没有生成，所以这就不是单单的样式问题了，就像是我写的配置没有生效一样，然后我还尝试修改了其它的一些配置发现都是没有效果的。

新的思路

这时想这应该还是仔细看下官方文档比较好，于是又回到了vue-awesome-swiper的github主页，才重视了"Swiper官方已对vue进行了支持"这句话，又心想既然已经有了官方的支持，那么就不用这个作为中间桥梁的第三方插件了吧，免不了这个插件会有什么莫名其妙的bug呢。
Swiper官方在从7版本开始就对各大流行组件库进行了支持，包括Vue、React、Angular等。但是Swiper Vue组件的文档中有一句红色提示，说Swiper Vue组件以后很可能就不再支持了，推荐使用Swiper Element。Swiper7和8为适配Vue、React、Angular，都要为他们单独各写一套代码，随着Web Component技术的发展与流行，Swiper就提倡开发者使用Web Component组件进行开发。
经过这一番考量，想着既然这样就直接用最新的吧（完全把兼容性抛在了脑后），又是一顿安装运行，发现总是报错，最终发现是不支持Vue2的。接着又尝试了Swiper Vue组件，甚至是退回到了7版本，都是不支持Vue2的（官网并没有看到醒目的兼容性提示）。
这才醒悟了为什么vue-awesome-swiper为什么重点适配到了Swiper6，因为Swiper6之前是没有官网支持的组件的，而vue-awesome-swiper恰恰就干了这个事情，并且也支持Vue2。那为什么刚开始我运行是有问题的呢，总不能用原生js方式去用吧？

恍然大悟

干了这么多问题也没解决，但让我突然想到了是不是我最开始安装的vue-awesome-swiper版本有问题了，这时又去看了一下最开始安装命令yarn add swiper vue-awesome-swiper发现没有加版本号，这就导致我安装的Swiper是最新的11版本！！！怪不得出现了乱七八糟的问题呢。

最终解决

调整了安装命令为yarn add swiper@5 vue-awesome-swiper@4，又一次成功安装了Swiper。运行了代码，分页器的DOM结构终于出来了，但样式还有点问题。通过审查发现官网实例上的分页器一些样式，在我的项目里是没有的，所以肯定就是引入的样式有问题了，去看了node_modules里的css文件，重新引入了一下，问题终于解决。
这时调整Swiper配置swiperOption，都是有效果的，这也证实了刚开始的配置根本没生效的猜想。

反思

本来没有多难得事情浪费了那么久，实属不应该，其中暴露出来的问题主要有：

  • 在不熟悉插件的情况下没有认真看文档
  • 习惯性的运行安装插件的代码，没有进行思考
  • 用新的模块/插件，没有考虑兼容性的问题
  • 做事不能乱着急，所谓心急吃不了热豆腐呀

声明：Hello World|版权所有，违者必究|如未注明，均为原创|本网站采用BY-NC-SA协议进行授权

转载：转载请注明原文链接 - Swiper踩坑经历

Carpe Diem and Do what I like