在.vue单文件组件内运用模块化的Swiper.js并封装成简易的轮播图组件

在.vue单文件组件内运用模块化的Swiper.js并封装成简易的轮播图组件

本文关键词

.vue组件、Swiper.js、JS modules、轮播图

应用场景

在vue项目开发之中，我们需要使用到轮播图。可以使用各种组件库所提供的轮播图组件来实现。但是本文主要讨论Swiper.js的使用。

预备知识

1. 了解.vue单文件组件的语法。
2. 了解Swiper.js的API。
3. 简单阅读过作者之前写的另一篇关于Swiper.js封装的文章。

轮播图组件编写

template模板的编写

结合Swiper的完整html框架，我们写出以下代码：

<template>

    <div class="swiper-container filmswiper">
        <div class="swiper-wrapper">
            <slot></slot>
        </div>
        <div class="swiper-pagination"></div>
    </div>

</template>

我们的轮播图需要一个“分页器”，所以写一个swiper-pagination类修饰的div标签。filmswiper类选择器是为了方便后面的代码选择该轮播图标签。

由于不确定组件使用者要渲染的内容，故组件对外提供slot插槽。

script代码的编写

在项目中安装Swiper.js依赖

使用npm i -s swiper命令来安装依赖。

导入所需要的模块

结合Swiper.js关于模块化开发的文档，我们写出以下代码：

import SwiperCore, {
    Pagination,
    Autoplay
} from 'swiper/core';
SwiperCore.use([Pagination, Autoplay]);

目前需要分页栏和自动播放模块，故引入了这两个模块。

导入css样式和Swiper类

import "swiper/swiper-bundle.css";
import Swiper from "swiper";

在.vue中导入样式是在script标签而不是在style标签内。同时，swiper本身也需要再次引入。

初始化Swiper对象

mounted() {
    const swiper = new Swiper(".filmswiper", {
        loop: true,
        pagination: {
            el: ".swiper-pagination"
        },
        autoplay: {
            delay: 1000,
        },
    });
}

在mounted声明周期内初始化。

初始化Swiper对象时，找到对应的html标签，即filmswiper类修饰过的标签。

script标签的全部内容

<script>
    import SwiperCore, {
        Pagination,
        Autoplay
    } from 'swiper/core';
    SwiperCore.use([Pagination, Autoplay]);

    import "swiper/swiper-bundle.css";
    import Swiper from "swiper";

    export default {
        mounted() {

            const swiper = new Swiper(".filmswiper", {
                loop: true,
                pagination: {
                    el: ".swiper-pagination"
                },
                autoplay: {
                    delay: 2000,
                },
            });

        }

    }
</script>

轮播图组件的运用

运用示例

<template>
    <div>
        <swiper :key="looplist.length">
            <div class="swiper-slide" v-for="item in looplist" :key="item.bannerId">
                <img :src="item.imgUrl">
            </div>
        </swiper>

        <div> 电影头部 </div>
        <router-view></router-view>
    </div>
</template>

注意事项

插槽内容的固定格式填写

我们封装的组件自带一个插槽，当并不意味着插槽的内容可以自由发挥。内部的标签必须实现“swiper-slide”修饰类。

组件的动态更新

由于页面渲染的数据很可能是异步传输的，而Swiper对象的初始化是在mounted生命周期内声明的，所以当数据异步传输到页面时，Swiper对象也应该动态的做出响应，再次初始化。

为了解决这样的问题，我们给组件增加:key="looplist.length"来实现组件的动态更新，只要数值发生改变，组件就动态刷新，按需调用一遍mount生命周期，进而实现Swiper对象的再次初始化。