vue学习之路|vue中使用swiper插件 javascript|前端|swiper|vue|vue.js

目录
步骤一：安装插件
步骤二：引包
步骤三：添加内容
步骤四：初始化swiper，创建一个swiper实例
步骤五：在父组件中使用并给Caousel组件传递参数
完整代码：

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了。

文章图片

步骤四：初始化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的组件名字，使用的时候就是用组件的名字滴！！！！！不然会报错的