首页 > 其他 > 详细

swiper页面刷新布局和指示点错乱

时间:2020-06-16 11:33:57      阅读:126      评论:0      收藏:0      [点我收藏+]

swiper轮播时,用到定时请求后台数据的场景,造成页面刷新时轮播图的指示点和轮播内容错乱。

解决方法是:

声明一个全局变量,轮播时进行销毁  这里我是把轮播为方法

var mySwiper = 0; 
               function play(){
                            if (mySwiper !== 0) {
                                mySwiper.destroy();
                            }
                            mySwiper = new Swiper(‘.swiper-container‘, {
                                observer: true,
                                observeParents: true,
                                // direction: ‘vertical‘, // 垂直切换选项
                                loop: true, // 循环模式选项
                                autoplay: {
                                    delay: 3000,
                                    stopOnLastSlide: false,
                                    disableOnInteraction: false,
                                },
                                pagination: {
                                    el: ‘.swiper-pagination‘,
                                    clickable: true
                                },
                                // 如果需要前进后退按钮
                                navigation: {
                                    nextEl: ‘.next‘,
                                    prevEl: ‘.prev‘
                                },
                            })
                        }

swiper页面刷新布局和指示点错乱

原文:https://www.cnblogs.com/shiraly/p/13139823.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!