vue项目中使用 swiper插件-小月博客

vue项目中使用 swiper插件

为什么要更新这个文章呢？因为报错了…..

使用vue写的单页，顶部的轮播图用到了swiper插件，刚开始没有引入vue，所以轮播图完整ok，一切流畅，但是我引入vue后，发现轮播图居然不动了，也不报错。这是为什么呢？？？？？

经过几次排查发现了问题，我的swiper的JS 代码不能独立一个区域了，因为加载机制是vue的了。正确使用方法如下：

1、引入相应css和js

<link rel="stylesheet" href="./css/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- Swiper JS -->
<script src="./js/swiper-bundle.min.js"></script>

2、html 部分

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="images/home_banner.png" />
        </div>
        <div class="swiper-slide">
            <img src="images/home_banner.png" />
        </div>
    </div>
    <div class="swiper-pagination" style="position: absolute; bottom: 34px; left: 0px;"></div>
</div>

3、一定要在 mounted 里面引入方法

mounted() {
    var mySwiper = new Swiper('.swiper-container', {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
        },
    })
},

因为我开始没有放在mounted里面，所以这一步是导致问题的所在根源。