关于swiper的异步加载报错、点击事件无响应、轮播卡顿问题的解决方法

swiper文件加载失败

异步加载swiper的js文件，最好在mounted中加载并且初始化。

如果在created中加载初始化，此时dom还未加载完成，初始化会报错。

async mounted() {
    await Util.loadJs('https://cdn.bootcdn.net/ajax/libs/Swiper/6.5.0/swiper-bundle.min.js');
    this.initSwiper();
}

点击事件无响应

swiper的点击事件不要绑定在标签上，在初始化的时候使用click事件。

因为loop模式下swiper会自动复制第一个和最后一个图片，但是由于只复制了图片未复制点击事件。

swiper循环一周后展示复制的那一个图片，点击事件无响应。

initSwiper() {
    autoplay: true,
    loop: true,
    on: {
        click:function(swiper) {
            this.toDetail(this.list[swiper.realIndex])
        }
    }
}

轮播卡顿问题(常见于ios机型)

问题：ios机型的swiper轮播到某一张图片的时候，图片的后半部分发生卡顿现象，甚至展示不全。

结论：卡顿问题与swiper的speed有关。

speed切换速度，即slide自动滑动开始到结束的时间(单位：ms)，也是触摸滑动释放至贴合的时间，默认值300ms。

这个时间适用于swiper图片宽度接近页面宽度。当swiper的样式多元化之后，比如宽度缩减到页面宽度的百分至五十左右。此时speed还是300ms的话，对于slide来说是一个漫长的时间。可能150ms就已足够，所以多余的时间就造成了一个卡顿现象。

initSwiper() {
    speed：150
}