动态修改swiper的slidesPerView属性，自动轮播有问题

简介

我们有个需求，就是需要动态的设置 swiper 中显示的 个数。

本以为直接赋予动态值就可以了，结果修改了之后，自动轮播有些问题。

解决办法

1. 给 swiper 配置中新增两个属性：

• observer: true, // 修改 swiper 自己或子元素时，自动初始化 swiper 默认为 false
• observeParents: false // 修改 swiper 的父元素时，自动初始化 swiper

2. 修改 swiper 配置中的一个属性：

• slidesPerView: this.judgeInfoData.loopJudgeNumber // 让其使用动态数据

3. 最后就是进行动态数据的操作了，在数据进行改变的地方，调用如下的方法(swiper 内置的方法)

judgeSwiper.destroy()
this._initJudgeSwiper()

解释一下

• judgeSwiper: 这是我的swiper名
• judgeSwiper.destroy(): 销毁这个 swiper
• this._initJudgeSwiper(): 重新初始化 swiper

代码

<div class="swiper-container judge-swiper swiper-no-swiping swiper-container-setting">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in judgeDataList" :key="index">
            <div class="judge-box"></div>
        </div>
    </div>
</div>


// eslint-disable-next-line no-unused-vars
let judgeSwiper

export default {
    methods: {
        _initJudgeSwiper () {
            // eslint-disable-next-line no-new
            judgeSwiper = new Swiper('.judge-swiper', {
                loop: true,
                autoplay: {
                    delay: 2000,
                    disableOnInteraction: false
                },
                speed: 3000,
                // slidesPerView: 4,
                slidesPerView: this.judgeInfoData.loopJudgeNumber,
                spaceBetween: 40,
                preloadImages: true,
                observer: true, // 修改 swiper 自己或子元素时，自动初始化 swiper 默认为 false
                observeParents: false // 修改 swiper 的父元素时，自动初始化 swiper
            })
        },
        changeLoopJudgeNumberHandler () {
            this.$nextTick(() => {
                judgeSwiper.destroy()
                this._initJudgeSwiper()
                // judgeSwiper.init()
                // judgeSwiper.params.slidesPerView = this.judgeInfoData.loopJudgeNumber
                // judgeSwiper.update()
            })
        },
    }
}