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里面,所以这一步是导致问题的所在根源。

站内部分资源收集于网络,若侵犯了您的合法权益,请联系我们删除!
赞赏是最好的支持
如果对你有帮助那就支持一下吧
立即赞赏
分享到:
赞(0) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏