vue轮播图使用swiper插件

OK今天给大家介绍一下vue2中使用swiper插件，以及在使用中需要的问题，比如说在使用时轮播图失效的情况的解决。由下图可以看到现在swiper已经更新到了8版本了，但是需要注意的是5以上的版本是为了vue3服务的，使用时多多少少会有谢问题。如果感兴趣的话可以看看官网的介绍swiper中文官网。

这里我先给出官网介绍的使用步骤，但是它是在html中使用的并且在vue2中使用也有点问题

初始化：

这里需要说明的是我这里是将轮播图组件Carousle单独抽离出来封装的。

步骤一：安装插件

npm i swiper@5

注意我们这里使用的是版本5，因为6及一上是为vue3服务的。

步骤二：引包

在main.js中引入swiper的样式，为什么在main.js中引入呢，因为在这里引入你只需要引入一次就可以了，全局都可以使用了，避免其他组件用一次就需要引入一次太麻烦了。

import 'swiper/css/swiper.css'

第一个参数：全局组件的名字第二个参数：哪一个组件，实际引入时就是用的组件里面的name

Vue.component(Carousel.name,Carousel)

将Caousel注册为全局组件

import Carousel from '@/components/Carousel'

注意：上面三个引入都是在main.js中进行

在抽离出来的组件Carousle文件夹下新建一个index.vue 在里面引入

import Swiper from 'swiper'

这个插件就可以了

步骤三：添加内容

OK这里需要注意的是官网中最外层包裹轮播图的div的类名是swiper-container，而现在的div类名应该是swiper，这就是导致轮播图失效的原因！！！！。所以我们只需要把swiper改为swiper-container就OK了。其他的类名不要改！！！因为这些类名都是swiper中我们引入的那个css文件定义好的。然后因为我是组件化了嘛，所以v-for中的list是父组件传过来的数据，我们只需要遍历它并且通过:src动态的绑定里面图片的URL地址就行啦。然后他里面还有许多功能不需要删除就OK了。


<div class="swiper-container" ref="floor1Swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="carousel in list" :key="carousel.id">
                <img :src="carousel.imgUrl">
            div>
 
        div>
        
        <div class="swiper-pagination">div>
 
        
        <div class="swiper-button-prev">div>
        <div class="swiper-button-next">div>
    div>

步骤四：初始化swiper，创建一个swiper实例

这里需要注意的是官网中是根据类名来初始化并创建实例的，我们这里是通过ref来的，这也是大多数人的方式。但是这里面有很多的问题需要注意。第一点就是swiper初始化实例是根据页面的的数据和结构来初始化的。也就是说在初始化swiper之前页面必须已经获取到了数据，并且结构已经渲染完毕了。并且如果你是使用了vuex技术，那么它的执行顺序是先执行这个swiper实例的初始化，然后在修改vuex中的数据的，所以这就会导致数据都没有swiper就已经初始化实例了，导致在v-for的时候并没有数据，也就造成了swiper失效。一个不完美的做法就是把这个初始化的方法放在一个定时器setTimeOut中，但是这会造成css样式以及动态的swiper只有等了你设置的延迟时间后才会出现。完美的解决办法是使用watch加nextTick。后面给出的完整代码会有。


  new Swiper(this.$refs.floor1Swiper, {
                        //direction: 'vertical', // 垂直切换选项
                        loop: true, // 循环模式选项
 
                        // 如果需要分页器
                        pagination: {
                            el: '.swiper-pagination',
                            clickable: true,//设置小原店面可以切换
                        },
 
                        // 如果需要前进后退按钮
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
 
                        // 如果需要滚动条
                        scrollbar: {
                            el: '.swiper-scrollbar',
                        },
                    })

步骤五：在父组件中使用并给Caousel组件传递参数

注意注意：这个在父组件中的Carousel是我在Carousel文件夹中的index.vue的组件名字，使用的时候就是用组件的名字滴！！！！！不然会报错的

完整代码：

Carousel文件夹下的index.vue完整代码如下，里面都有详细的笔记和解释！！！