1. loop模式下点击事件失效
背景:loop模式下, ① 反向轮播的最后一页 ② 反向轮播后正向轮播的第一页 其slide包含的DOM涉及的事件失效
原因:首先先了解swiper的loop模式。loop模式:会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换,让Swiper看起来是循环的。 但是复制时不包含DOM中涉及的事件。
解决:通过swiper的click回调函数进行处理,代码如下:
on: {
click: function (e) {
let clickDom = e.target
console.log(clickDom) // 点击的DOM
}
}
2. 嵌套swiper,子swiper(以组件形式)数据动态更新下的loop模式失效
背景:嵌套swiper,子swiper(以组件形式)的数据动态更新(子swiper的有误根据特定情况,从而形成数据动态更新的现象),且包含observer: true, observeParents: true, loop还是失效。
原因:swiper的数据和页面渲染并没有完成情况下,对swiper进行了初始化,loop模式失效
解决:通过监听加钩子的方式在合适的时机进行swiper的初始化
watch: {
swiperData: function () { // swiper渲染数据
this.$nextTick(() => {
this.initSwiper()
})
}
}
3. 效果特殊展示(slide的样式交替出现)
背景:slide的样式交替出现。奇数个slide在loop模式下,最后一个和复制的第一个样式重复,如图所示:(左两个)
原因:loop模式形成的原理导致,样式被复制。
解决:① 控制slide样式的交替出现,是由v-for中的index值的奇偶性控制的。(本人实现方法)
② 控制loop模式下,奇数个slide样式仍交替出现。通过将渲染的swiper数据(奇数个)变成两个奇数数据,即数据*2,通过偶数个出现就会达到想要的效果。如上图最后一个
待更新....