Swiper使用总结

作者: i断章 | 来源:发表于2020-03-18 10:14 被阅读0次

    在使用swiper轮播插件所遇问题:

    1.在初始化swiper之前一定,一定要先有轮播数据,在初始化swiper

    2.在动态改变swiper之前一定一定要销毁swiper,销毁方法

    3.如果要在pc端使用swiper,请使用swiper3及以下版本,因为以上版本不兼容IE,如果不考虑IE就可以随便使用。请注意swiper4适用于手机端

    4.在一个页面使用多个swiper时,请定义不同的id或class类名,以免相互影响

    5.如果实在react中使用swiper,请确保轮播数据改变后再重置轮播数据,因为react的生命周期函数componmentWillReceiveProps只要父级的props发生变化就会触发,然而在使用swiper时只能在轮播数据改变是重置就不会发生轮播一段时间后就没有了轮播数据的问题。

    6.恶心的数据操作......................

    补充:

    问题一:swiper自动轮播,滚动一段时间后,滚动速度会越来越快,快速划过,出现闪屏的情况。

    解决方案:1.在初始化加载轮播对象的时候写在定时器里,延迟加载,且在动态加载的过程中使用hook控制是否触发加载项,注意!!!请在存在数据的情况下进行一系列操作。以下为处理的代码:

    代码示例

    问题二:swiper的loop属性不支持多列展示属性,要实现多列且实现loop效果

    解决方案:轮播数据为二维数组,每一个一维数组为一个swiper,根据数据循环生成多个swiper,注意每个swiper要有唯一区分值,如id或者class类名,数据结构如下:

    数据结构

    相关文章

      网友评论

        本文标题:Swiper使用总结

        本文链接:https://www.haomeiwen.com/subject/qifqyhtx.html