Swiper 插件在 Vue 中的使用及踩坑

如何在 Vue 中使用 Swiper轮播，以及使用中遇到的坑

1. Swiper 插件的使用

1. 项目下安装 swiper

npm i swiper -S

2. vue 组件中导入并使用

<template>
     <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</template>
<script>
// 导入 swiper
import Swiper from "swiper/swiper-bundle.js"
import "swiper/swiper-bundle.min.css"
    
export default {
    mounted() {
        // swiper 配置项
        const mySwiper = new Swiper('.swiper-container', {
            loop: false, // 循环
            speed: 250, // 切换过渡(毫秒)
            slidesPerView: 1, // 展示轮播数量
            spaceBetween: 10, // 间距
            centeredSlides: false,
            watchSlidesProgress: false,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        })
    },
};
</script>

swiper 插件使用中遇到的坑

解决 swiper 用 axios 获取轮播图片列表时,滑动及样式失效的问题

方法1：给 swiper 添加 如下两个配置项：observer: true observeParents: true

<script>
export default {
    mounted() {
        // swiper 配置项
        const mySwiper = new Swiper('.swiper-container', {
            observer:true, // 修改swiper自己或子元素时，自动初始化swiper
            observeParents:true // 修改swiper的父元素时，自动初始化swiper
        })
    },
};
</script>

方法2：用 watch 侦听器，监听 axios 数据的变化，配合 this.$nextTick() 方法

<script>
export default {
    data() {
        return {
            mnData: [], // 转存 axios 获取到的数据
        }
    }
    created() {
        this.getUserList()
    },
    methods: {
        // 发起 axios 请求：获取轮播数据
        async getUserList() {
            const {data: res} = await request.get("api接口")
            this.mnData = res.mnList
        },
    },
    // 方法二：解决 swiper 用 axios 获取轮播图片列表时,滑动及样式失效的问题
    watch: {
        // 侦听 axios 数据(mnData)的变化
        mnData() {
            // this.$nextTick：让 wiper 在 axios 数据获取完毕后,再执行（DOM元素更新后再执行）
            this.$nextTick(() => {
                // swiper 配置项
                const mySwiper = new Swiper(".swiper-container", {
                    loop: false,
                    speed: 250,
                });
            })
        }
    }
};
</script>