vue中使用swiper插件

 

目录

 步骤一：安装插件

步骤二：引包

步骤三：添加内容

步骤四：初始化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了。

<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 :list="bannerList"/>

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

完整代码：

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

<template>
    <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>
</template>

<script>
import Swiper from 'swiper'
export default {
    props: ['list'],
    name: 'CarouSel',
    components: {},
    data() {
        return {}
    },
    watch: {
        //swiper必须要先有结构,但是不能够放在mounted中，v-for的结构可能还没有渲染完
        //此时vuex中的数据还没有被修改。v-for导致轮播图还是静态的
        list: {

            //这里必须使用immediate，因为数组是从父组件传过来的从来没有变过
            //所以使用immediate立即监听
            immediate: true,
            handler() {
                //必须和nexttick一起使用，因为v-for遍历结构需要时间，使用这个可以保证结构渲染完马上
                //产生轮播图
                this.$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',
                        },
                    })
                })
            }
        }
    }
}
</script>

<style>
</style>

 随便整了一个组件中效果图如下，写这篇文章也算是我对使用swiper组件中总结，也方便我以后进行巩固和复习。实现轮播图其实如果是后台项目的话可以使用elementUI中的走马灯，也是实现轮播图的，它的使用方式是比这个简单的，但是你如果只是用一个轮播图就取引入elementUI就太不内个啦。

 

如果大家觉得有帮助欢迎点赞评论收藏一波哟