swiper使用踩坑记录

1.类名不一致问题。

• 问题描述：在Swiper初始化时，如果Swiper初始化函数中的参数swiperContainer与自定义swiper容器名不一致，Swiper实例初始化不成功。
• 解决方案：swiperContainer与标签中自定义的容器类名一致。例如：

// 用于初始化一个Swiper，返回初始化后的Swiper实例。
// swiperContainer:Swiper容器的css选择器，例如".swiper"
new Swiper(swiperContainer, parameters);
// vertical-swiper-container:自定义的swiper容器名
<div class="main vertical-swiper-container"></div>

• 问题描述：在Swiper初始化时，如果分页器容器或前进/后退按钮的CSS选择器或HTML元素（el）或（nextEl/prevEl）与自定义类名不一致，即使Swiper实例初始化成功，分页器和导航按钮也无法正常工作。
• 解决方案：确保el、nextEl和prevEl的配置与HTML中的类名或选择器一致。例如：

this.verticalSwiper = new Swiper('.vertical-swiper-container', {
    direction: 'vertical',
    pagination: {
        el: '.vertical-pagination',
        clickable: true
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    },
});
// 前进后退按钮，类名唯一
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
// 分页器，类名唯一
<div class="vertical-pagination"></div>

2.swiper官网给的配置选项在swiper实例初始化成功后即可根据自身需求进行选择配置，而不需要手动编写对应实现逻辑。

3.swiper实例初始化

        ①初始化swiper实例的类名可以自定义，但类名位置放置要正确，即类名对应标签位置需正确；其中若包含导航和分页等配置，则这些配置选项的类名也需要与自定义名称一一对应。

        ②轮播器在进行切换时会自行判断当前页面并更新页面的类名，不需要手动编写或判断页面状态，swiper会根据页面的相邻或不相邻状态自适应地更新对应标签类名。

        ③在初始化多个swiper实例时，可能出现只有第一个swiper实例初始化成功的情况，个人的解决方案采用的是，将其余未初始化成功的swiper实例代码置于定时器和this.$nextTick(() => {};方法内部。以初始化两个swiper实例为例：

this.verticalSwiper = new Swiper('.vertical-swiper-container', {
        direction: 'vertical',
        pagination: {
            el: '.vertical-pagination',
            clickable: true
        },
        effect: 'slide',
        on: {
            init: () => {
                console.log('垂直Swiper初始化完成');
                // this.initHorizontalSwipers();
            },
            slideChange: () => {
                console.log('垂直轮播切换到:', this.verticalSwiper.activeIndex);
                this.currentPageIndex = this.verticalSwiper.activeIndex;
                this.updateNavigationButtonState();
                this.checkLazyPicture();
            },
            slideChangeTransitionStart: () => {
                console.log('垂直过渡开始');
                this.duration = 1000;
            },
            slideChangeTransitionEnd: () => {
                console.log('垂直过渡结束');
                this.duration = 0;
            }
        }
});
setTimeout(() => {
        this.$nextTick(() => {
            this.horizontalSwiper = new Swiper('.horizontal-swiper-container', {
                direction: 'horizontal',
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                },
                mousewheel: {
                    sensitivity: 1,
                    releaseOnEdges: true
                },
                effect: 'slide',
                on: {
                    init: () => {
                        console.log('水平Swiper初始化完成');
                    },
                    slideChange: () => {
                        if (this.horizontalSwiper) {
                            this.horizontalCurrentPageIndex = this.horizontalSwiper.activeIndex;
                        }
                    },
                    slideChangeTransitionStart: () => {
                        console.log('水平过渡开始');
                    },
                    slideChangeTransitionEnd: () => {
                        console.log('水平过渡结束');
                    }
                }
            });
        })
}, 1000);