zoukankan      html  css  js  c++  java
  • 解决问题:swiper动态加载图片后无法滑动

    原因:swiper在初始化的时候会扫描swiper-wrapper下面的swiper-slide的个数,从而完成初始化,但是由于动态加载时在初始化之后的动作,所以导致无法滑动。

    解决方案 1:在动态获取数据后,马上对swiper进行初始化;

     1 $.ajax({
     2     type:"get",
     3     url:finalUrl,
     4     dataType:"json",
     5     success:function(data){
     6         $("#reportList").empty();
     7         for(var i=0;i<reportLength;i++){
     8             var url="'"+"reportDetial.html"+location.search+"&noticeId="+reportList[i].id+"'";
     9             reportHtml+='<div class="swiper-slide report-item" onclick="reportJump('+url+')">'
    10                 +'<div class="item-title">'+data.resp[i].title+'</div>'
    11                 +'<div class="item-content">'+data.resp[i].content+'</div>'
    12                 +'<div class="item-date">'+data.resp[i].createTime+'</div>'
    13             +'</div>';
    14         }
    15         $("#reportList").append(reportHtml);
    16         var swiper = new Swiper('.swiper-container', {
    17             slidesPerView : 3
    18         });
    19     }
    20 });

    解决方案2:

    1   var mySwiper = new Swiper ('.swiper-container', {
    2         observer:true,//修改swiper自己或子元素时,自动初始化swiper
    3         observeParents:true,//修改swiper的父元素时,自动初始化swiper
    4         loop: true, // 循环模式选项
    5         pagination: {
    6             el: '.swiper-pagination',
    7         },
    8 
    9     })
  • 相关阅读:
    Matlab中对二维数组排序
    ATL COM对象崩溃问题一例
    CSS样式介绍
    关于php
    BootStrap介绍
    关于base系列的加密解密
    php基础知识
    任务一
    php数组
    【CV学习1】opencvpython:第一,二章
  • 原文地址:https://www.cnblogs.com/yangguoe/p/9857398.html
Copyright © 2011-2022 走看看