zoukankan      html  css  js  c++  java
  • swiper页面刷新布局和指示点错乱

    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'
                                    },
                                })
                            }
  • 相关阅读:
    字符串类型
    mysql-schema-sync 实现 不同环境实例间表结构统一
    order by 运行过程
    MySQL 生成随机测试数据
    MySQL binlog 日志处理
    MySQL 查询优化
    使用 pyenv 管理不同的 Python 版本
    使用 pyenv 管理不同的 Python 版本
    MVC5 已有打开的与此 Command 相关联的 DataReader,必须首先将它关闭。
    在ASP.net MVC中利用ajax配合razor进行局部加载(给页面套好样式以后,一刷新就不合适了,终于找到了解决方案)
  • 原文地址:https://www.cnblogs.com/shiraly/p/13139823.html
Copyright © 2011-2022 走看看