美文网首页
swiper使用遇到的问题

swiper使用遇到的问题

作者: 殖民_FE | 来源:发表于2019-10-23 16:58 被阅读0次

    在调试swiper的过程中也是遇到了不少坑,比如:

    1- loop不生效
    2- 手动轮播后,自动轮播失效
    3- 点击对应的slide,获取不到对应的index
    4- 动态数据绑定,导致点击事件消失
    5- 点击失效

    等等......一系列的问题!

    也是脑壳疼!!!!!

    接下来提供一个比较全的解决方案:

    function initSwiper() {
        $timeout(function () {
          swipersInit = new window.Swiper('.swiper-container', {
            pagination: '.pagination',
            paginationClickable: true,
            initialSlide: 0,
            autoplay: 3000,
            loop: true,
            observer: true,
            observeParents: false,
            autoplayDisableOnInteraction: false,
            onSlideChangeEnd: function (swiper) {
              $timeout(function () {
                swiper.update();
                swipersInit.startAutoplay();
              }, 100)
            },
            onClick: function (swiper) {
              var i = 数据数组的长度;
              var reallIndex = (swiper.activeIndex - 1 + i) % (i);
             console.log(reallIndex);       }
          })
          console.log(swipersInit)
        }, 100)
    

    一些配置项,官网上都有介绍!
    这里提示一个注意点, 当使用swiper3.x版本的,有的版本是没有
    reallIndex这个字段的,这里需要转换一下,看以上代码!
    转换的目的,就是获取slide真实的index!

    点击失效的问题,是插件的问题,升级到3.4.2 swiper

    具体还得多看看github!

    还有一点比较重要的是,实例销毁时,传递的布尔值,要根据文档的提示进行操作!

    比较新的版本应该是不存在此问题的!

    相关文章

      网友评论

          本文标题:swiper使用遇到的问题

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